font-weight: bolder;
和font-weight: bold;
样式之间有什么区别?
直到今天,我才在项目的CSS文件中找到它。结果与直观相同(在Ubuntu 10.10,Firefox 3.6.15上测试)。
答案 0 :(得分:30)
bolder
是relative font weight:
'更大胆'和'更轻'的值选择相对于从父级继承的重量的字体粗细
bolder
和lighter
甚至是official spec的一部分。如何解释和显示它们取决于浏览器。
它们在视觉上看起来相同的事实是因为大多数浏览器不能正确支持bold
和normal
之外的字体粗细变化。
以下是一个背景信息问题:Are all CSS font-weight property's values useful?
答案 1 :(得分:16)
Pekka的答案在技术上是正确的,但从对该答案的评论来看,它的含义还没有被正确理解。
首先,我们需要了解指定重量,计算重量和渲染重量之间的差异。
对于bold
,指定的权重为“粗体”,计算的权重为“700”,渲染的权重取决于字体,唯一的保证是它不会比较低的元素轻计算重量。 (即,由于“正常”等于“400”,“粗体”将永远不会比“正常”更轻(尽管它可以相同地呈现。)
对于bolder
,指定的权重为“更大胆”,如果容器元素的计算权重小于或等于300,则计算权重为“400”,否则为“700”,如果容器元素具有计算权重小于或等于500,否则为“900”渲染重量再次取决于具有相同保证的字体。
由于字体通常仅支持normal
和bold
权重,这通常意味着font-weight:bold
和font-weight:bolder
即使具有不同的计算权重也会得到相同的呈现。
但即使字体仅支持这两个权重,它也不会有。特别是,如果容器元素的计算权重小于“400”,则“粗体”将计算为“400”的权重,并且与具有指定权重“正常”的元素相同。
为了说明这一点,请参阅此JsFiddle: http://jsfiddle.net/UgAa5/¹
<style>
p { font-weight:300; font-size:2em }
#scenario1 b { font-weight:bolder; }
#scenario2 b { font-weight:bold; }
</style>
<p id="scenario1">
<span>plain</span>
<b>bold?</b>
</p>
<p id="scenario2">
<span>plain</span>
<b>bold?</b>
</p>
¹当前版本的IE,Firefox,Chrome和Opera都正确地证明了这一点。较旧的浏览器,例如Safari 5.1,不会。
² HTML5规范说明<b>
元素的默认字体权重应为“更大胆”。 Firefox和IE会这样做,但基于webkit / blink的浏览器默认为“粗体”,normalize.css将font-weight:bold
设置应用于所有浏览器的<b>
元素。