CSS:"粗体"和"粗体"字体重量样式有什么区别？

Question

font-weight: bolder;和font-weight: bold;款式有什么区别？

直到今天,当我在项目的CSS文件中找到它时,我从未遇到过这样的风格.结果在视觉上是相同的(在Ubuntu 10.10,Firefox 3.6.15 上测试).

Answer 1

bolder是相对字体粗细:

'bolder'和'lighter'值选择相对于从父级继承的权重的字体粗细

bolder和lighter是的,甚至部分官方规格.如何解释和显示它们取决于浏览器.

它们在视觉上看起来相同的事实是因为大多数浏览器不能正确支持超出bold和的字体重量变化normal.

这是一个背景信息的问题:所有CSS font-weight属性的值是否有用？

Answer 2

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

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

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

因为bolder,如果容器元素的计算权重小于或等于300,则指定的权重为"更大胆"且计算的权重为"400",否则如果容器元素的计算权重小于或等于300,则计算权重为"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>所有浏览器的元素.}