为什么使用“font-weight: bolder”会跳过加粗步骤？

Question

根据MDN页面关于 font-weight 属性的介绍以及其他来源，font-weight: bolder 会使文本内容比父元素更粗一级（在可用字重中）。

我有一个测试页面，包含了从谷歌字体获取的 "Open Sans" 字体，其中包括字重为 300、400（也称为“标准”）、600、700（也称为“加粗”）和 800。手动设置数字字重可以按预期工作，但使用 bolder 似乎跳过了字重为 600 的情况。

Firefox 和 Chrome 在此方面达成了一致，因此我可能误解了该上下文中“一步”的含义。

这里有一个 JSFiddle 用于测试，以及我得到的结果的屏幕截图。

第一节拥有手动设置数字 font-weight。第二节具有嵌套的 div 块，使用了 font-weight: lighter 样式（按预期工作），第三节则具有嵌套的 div 块，其样式为 font-weight: bolder；我正在尝试理解这种效果。

- Zilk

Answer 1

来自CSS2.1规范中的font-weight部分：

'bolder'和'lighter'的值表示相对于父元素的权重值。根据继承的权重值，使用下表计算所使用的权重。子元素继承计算后的权重，而不是'bolder'或'lighter'的值。

Inherited val   bolder  lighter
100             400     100
200             400     100
300             400     100
400             700     100
500             700     100
600             900     400
700             900     400
800             900     700
900             900     700

这意味着任何比font-weight为400更加粗体的文字将被赋予700的字重，而任何比700更加粗体的文字将被赋予900的字重。

这正是在你的JSFiddle演示中发生的事情。

更加粗体

This is some text with weight 400.        <!-- 400 -->
This text is one step bolder than above.  <!-- bolder than 400 = 700 -->
This text is one step bolder than above.  <!-- bolder than 700 = 900 -->
This text is one step bolder than above.  <!-- bolder than 900 = 900 -->
This text is one step bolder than above.  <!-- ... -->

轻量级

This is some text with weight 400.        <!-- 400 -->
This text is one step lighter than above. <!-- lighter than 400 = 100 -->
This text is one step lighter than above. <!-- lighter than 100 = 100 -->
This text is one step lighter than above. <!-- ... -->

- James Donnelly

---

你的谷歌功夫比我快。*/鞠躬* - OnoSendai

@OnoSendai，将各种规格书签化会有所帮助。 :) - James Donnelly

太棒了！我记得以前遇到过这个问题，但我必须承认我不得不查一下。 - OnoSendai

当然，这解释了一切。我在想什么呢，竟然去看其他来源而不是直接查看规格说明书... - Zilk

因为你使用了逻辑，@Zilk，在大多数情况下这是最好的方法。但有时规格说明违反逻辑 - 或者可能有一个原因，尽管它可能很复杂。 - OnoSendai

Answer 2

从纯逻辑上讲，你是正确的。但根据W3C建议，情况并非如此。引用该文档：

'bolder'和'lighter'的值表示相对于父元素的字重值。根据继承的字重值，使用下表计算所使用的字重。子元素继承计算出的字重，而不是'bolder'或'lighter'的值。

[Inherited value]   [bolder]    [lighter]
100                 400         100
200                 400         100
300                 400         100
400                 700         100
500                 700         100
600                 900         400
700                 900         400
800                 900         700
900                 900         700

- OnoSendai