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%);
}

...等。（颜色类中没有指定字体大小）;如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＆lt; = 8支持）。

在答案的这一部分对em x px x rem辩论稍微偏离主题。

引用this answer：

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

现代浏览器可以很好地扩展px单位。 em主要用于旧的IE占主导地位且在缩放时未缩放px字体大小。

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

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

关于哪个单位用于rem，总会有激烈的讨论。选择那个给你的项目带来较少麻烦和足够的东西。

总而言之，这取决于个人偏好和项目要求。

参考文献：

定义和解释

更多讨论

Should I use px or rem in my css? - 问题（font-size推荐px）
Why Ems? - CSS-Tricks（font-size推荐em）

Answer 2

这是因为当您使用“*”选择器时，您将font-size：3em应用于“.red”，“。green”等的父母，（在这种情况下是正文）以及; em是一个复合单元所以对于你声明字体大小的方式你应用font-size：3em到body（48px假设16px浏览器默认）然后font-size：3em到你的类这意味着字体大小为144px。

希望我的解释有道理。

Answer 3

em单位在font-size属性的值中使用时，表示父元素的字体大小。因此，声明* { font-size: 3em }会使每个元素的字体大小是其父元素字体大小的三倍。

如果您想使用的浏览器默认字体大小（可以是任何内容）的三倍，那么最简单的方法是声明body { font-size: 3em }而不是为其他元素声明font-size

Answer 4

感谢Jukka明确暗示的*建议，CSS现在是：

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

更新jsfiddle是http://jsfiddle.net/NvTvr/11/

虽然，如果你在jsfiddle中选择TidyUp，它会垂直扩展单行类和元素声明（如果只设置了一个属性，我喜欢将它全部保存在一行上）。

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

更新

4 个答案:

参考文献：

定义和解释

更多讨论