为什么字体大小普遍应用时不可靠？

Question

使用以下 CSS：

* {
    margin: 0;
    padding: 0;
    font-family:"Segoe UI";
    font-variant: small-caps;
}
.red {
    color: hsl(0, 100%, 50%);
    font-size: 3em;
}
.orange {
    color: hsl(30, 100%, 50%);
    font-size: 3em;
}
.yellow {
    color: hsl(60, 100%, 50%);
    font-size: 3em;
}
.green {
    color: hsl(120, 100%, 50%);
    font-size: 3em;
}
.blue {
    color: hsl(210, 100%, 50%);
    font-size: 3em;
}
.indigo {
    color: hsl(230, 100%, 50%);
    font-size: 3em;
}
.violet {
    color: hsl(274, 100%, 50%);
    font-size: 3em;
}

... * 选择器中的属性工作正常 - 它们适用于所有类；然而，如果我在那里移动字体大小，文本就会增长到霸王龙的比例。您可以通过将字体大小从各个类移动到 * 类来看到这一点： http: //jsfiddle.net/NvTvr/8/

为什么会出现这种情况？

更新

所以这就是要走的路：

* {
    margin: 0;
    padding: 0;
    font-family:"Segoe UI";
    font-variant: small-caps;
    font-size: 48px;
}
.red {
    color: hsl(0, 100%, 50%);
}

...ETC。（颜色类别中未指定字体大小）；如http://jsfiddle.net/NvTvr/10/所示

Answer 1

因为em是相对于上下文而言的。

由于font-size从上下文继承，每个后代元素em font-size都会将当前元素乘以font-size包含文本内容的元素。

让我们看看实践，假设：

* { font-size: 3em }

您将其（相对于上下文）应用于font-size所有元素。

这意味着，该html元素的字体大小将是默认浏览器字体大小的 3 倍。其body字体大小将是其容器 ( html) 的 3 倍，相当于默认字体大小的 9 倍。对于每个元素的祖先，依此类推。

有一个新的单元没有这个问题，rem它是相对于 root 的。但这并没有得到广泛的支持（不支持 IE<=8）。

对于这部分答案中的emx pxx辩论有点偏离主题。rem

引用这个答案：

em当您特别希望某些内容的大小取决于当前字体大小时使用。

现代浏览器可以px很好地缩放单位。主要在旧版 IE 占主导地位并且缩放时em不缩放字体大小时使用。px

尽管如此，em它仍然用于网页设计。比如说，在制作 CSS 图标时，它应该相对于文本的字体大小进行缩放。但对于整体布局，我选择rem/ px，它不会产生复杂的问题和令人头疼的问题，或者在制作流畅布局时使用百分比。

font-size的问题px是，如果您需要更改页面文本的整体大小，则必须更改font-size使用 的每个声明px。这就是rem援助的地方。

关于使用哪个单位用于font-size. 选择一种不会让人头疼并且足以满足您的项目的产品。

所以总而言之，取决于个人喜好和项目需求。

参考：

定义和解释

• CSS 长度单位- MDN
• 为什么是 em 而不是 px？- 所以问题
• 使用 rem 调整字体大小- Snook.ca

更多讨论

• 我应该在 css 中使用 px 还是 rem ？- SO问题（px推荐font-size）
• 为什么是埃姆斯？- CSS-Tricks（em推荐font-size）