Question

font-weight: bolder;和font-weight: bold;样式之间有什么区别？

直到今天，我才在项目的CSS文件中找到它。结果与直观相同（在Ubuntu 10.10，Firefox 3.6.15上测试）。

Answer 1

bolder是relative font weight：

'更大胆'和'更轻'的值选择相对于从父级继承的重量的字体粗细

bolder和lighter甚至是official spec的一部分。如何解释和显示它们取决于浏览器。

它们在视觉上看起来相同的事实是因为大多数浏览器不能正确支持bold和normal之外的字体粗细变化。

以下是一个背景信息问题：Are all CSS font-weight property's values useful?

Answer 2

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>元素。}

CSS：“粗体”和“粗体”字体重量样式有什么区别？

2 个答案: