css - 为什么font-size在普遍应用时不可靠？

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 - 大小 最大为包含文本内容的元素。

让我们看看实践，假设:

* { font-size: 3em }

您正在将那个(相对于上下文)font-size 应用于所有 元素。

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

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

---

在这部分的答案中，关于 em x px x rem 的争论有点跑题了。

引用 this answer :

Use em when you specifically want the size of something to depend on the current font size.

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

不过，em 仍然在网页设计中使用它。比如说，在制作应该相对于文本字体大小缩放的 CSS 图标时。但对于整体布局，我选择了 rem/px，这不会在制作流畅的布局时产生复杂的问题和麻烦，也不会产生百分比。

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

关于 font-size 使用哪个单位一直存在激烈的讨论。选择那些不会让你头疼的问题，并且对你的元素来说足够了。

所以总而言之，还是要看个人喜好和元素需求。

---

引用资料:

定义和解释

• CSS Length units - MDN
• Why em instead of px? - 所以问题
• Font sizing with rem - Snook.ca

更多讨论

• Should I use px or rem in my css? - SO问题(建议px为font-size)
• Why Ems? - CSS 技巧(推荐 em 用于 font-size)