为什么"font-weight:bolder"会跳过粗体步骤？

Question

根据字体权重和其他来源的MDN页面,font-weight: bolder使文本内容"一个字体权重比父元素更暗(在字体的可用权重中)."

我有一个测试页面,其中包含Google Fonts中的"Open Sans"字体,权重为300,400(又名"普通"),600,700(又名"粗体")和800.手动设置数字字体权重正如所料,但使用bolder似乎跳过字体权重600.

Firefox和Chrome对此达成一致,所以我可能误解了"一步"在这种情况下的含义.

这是一个用于测试的JSFiddle,以及我得到的结果的屏幕截图.

第一部分有手动数字font-weight设置.第二个嵌套div块用样式font-weight: lighter(按预期工作),第三个嵌套div块用font-weight: bolder; 这个显示了我想要了解的效果.

Answer 1

从font-weightCSS2.1规范的部分:

"粗体"和"较亮"的值表示相对于父元素的重量的值.根据继承的重量值,使用下面的图表计算使用的重量.子元素继承计算的权重,而不是"更大胆"或"更轻"的值.

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

这意味着,任何bolder大于font-weight400给出的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. <!-- ... -->