根据MDN page on font-weight和其他来源,font-weight: bolder
使文字内容“一个字体权重比父元素更暗(在字体的可用权重中)。”
我有一个测试页面,其中包含Google字体中的“Open Sans”字体,权重为300,400(又名“普通”),600,700(又名“粗体”)和800.设置数字字体手动权重按预期工作,但使用bolder
似乎跳过字体权重600。
Firefox和Chrome同意这一点,所以我可能误解了“一步”在这种情况下的含义。
Here's a JSFiddle用于测试,以及我得到的结果的屏幕截图。
第一部分包含手动数字font-weight
设置。第二个嵌套div
块用font-weight: lighter
设置样式(按预期工作),第三个块嵌套div
块font-weight: bolder
;这个显示了我想要了解的效果。
答案 0 :(得分:6)
来自font-weight
section of the CSS2.1 specification:
'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
这意味着任何bolder
而不是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. <!-- ... -->
答案 1 :(得分:3)
从纯逻辑说起,你是对的。但根据W3C recommendation,情况并非如此。引用文件:
'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