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

Posted 2023-03-06

【中文标题】为啥普遍应用时字体大小不可靠？

【英文标题】：Why is font-size unreliable when universally applied?为什么普遍应用时字体大小不可靠？

【发布时间】：2013-05-27 20:38:22

【问题描述】：

使用以下 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;

... * 选择器中的属性工作正常 - 它们适用于所有类；但是，如果我将 font-size 移动到那里，文本就会变成暴龙的比例。您可以通过将字体大小从各个类移动到 * 类来看到这一点：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/中所见@

【问题讨论】：

您不必对* 应用任何字体样式。虽然不像font-size 那样有问题，但您仍然不必要地将它们应用于已接受答案中提到的所有元素。

请不要编辑问题以包含答案。编辑问题只是为了澄清您的问题。

@BoltClock：通过 * 选择器将边距和填充重置为 0 不是公认的做法吗？

【参考方案1】：

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

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

让我们在实践中看看，假设：

*  font-size: 3em 

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

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

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

---

这部分答案中的em x px x rem 辩论有点跑题了。

引用this answer:

当您特别希望某物的大小取决于当前字体大小时，请使用 em。

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

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

px 用于字体大小的问题在于，如果您需要更改页面文本的整体大小，则必须更改每个使用 px 的 font-size 声明。这就是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-Tricks（推荐em 用于font-size）

【讨论】：

“它遭受级联”是什么意思？

@BoltClock 我的措辞不正确吗？它应该意味着第一部分中描述的效果 - 元素上设置的字体大小级联到后代元素（也许“被继承”在这里更有意义）。然后这个继承的字体大小与元素自己的em字体大小复合。如果您可以改进措辞，请随意（有点太困了atm，但如有必要，我明天可能会查看此答案）。

@BoltClock 我已经删除了那个模棱两可的部分，并在开头添加了一个段落。

【参考方案2】：

这是因为当您使用 "*" 选择器时，您将 font-size:3em 应用于 ".red",".green" 等的父级，（在本例中为 body ）以及； em 是一个复合单元，因此通过声明字体大小的方式，您将 font-size:3em 应用于正文（48px 假设浏览器默认为 16px），然后将 font-size:3em 应用于您的类，这意味着字体大小为 144px。

希望我的解释有意义。

【参考方案3】：

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

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

【参考方案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，它会垂直扩展一行类和元素声明（如果只设置一个属性，我喜欢将它们全部放在一行上的想法）。