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

时间:2011-04-08 09:04:44

标签: css

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

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

2 个答案:

答案 0 :(得分:30)

bolderrelative font weight

  

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

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

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

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

答案 1 :(得分:16)

Pekka的答案在技术上是正确的,但从对该答案的评论来看,它的含义还没有被正确理解。

首先,我们需要了解指定重量,计算重量和渲染重量之间的差异。

对于bold,指定的权重为“粗体”,计算的权重为“700”,渲染的权重取决于字体,唯一的保证是它不会比较低的元素轻计算重量。 (即,由于“正常”等于“400”,“粗体”将永远不会比“正常”更轻(尽管它可以相同地呈现。)

对于bolder,指定的权重为“更大胆”,如果容器元素的计算权重小于或等于300,则计算权重为“400”,否则为“700”,如果容器元素具有计算权重小于或等于500,否则为“900”渲染重量再次取决于具有相同保证的字体。

由于字体通常仅支持normalbold权重,这通常意味着font-weight:boldfont-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>元素。