font-weight

font-weight CSS 属性指定了字体的粗细程度。一些字体只提供 normal 和 bold 两种值。

示例

font-weight: normal;
Copy to Clipboard
font-weight: bold;
font-weight: lighter;
font-weight: bolder;
font-weight: 100;
font-weight: 900;

浏览器支持

浏览器都支持 font-weight
任何版本的IE浏览器都不支持其 font-variant 属性的 inherit 值

语法:

font-weight : normal | bold | bolder | lighter | integer

设置或检索对象中的文本字体的粗细。

作用由客户端系统安装的字体的特定字体变量映射决定。系统选择最近的匹配。也就是说，用户可能看不到不同值之间的差异。对应的脚本特性为fontWeight。

取值:

• normal :指定文本字体样式为正常的字体。相当于数字值400。
• bold :加粗。与700等值。
• lighter ：比从父元素继承来的值更细(处在字体可行的粗细值范围内)。
• bolder :比从父元素继承来的值更粗(处在字体可行的粗细值范围内)。
• integer :一个介于 1 和 1000(包含)之间的 类型值。更大的数值代表字体重量粗于更小的数值(或一样粗)。一些常用的数值对应于通用的字体重量名称，如章节常见粗细值名称和数值对应所描述。

回退机制

如果指定的权重值不可用，则使用以下规则来确定实际呈现的权重：

• 如果指定的权重值在 400 和 500 之间（包括 400 和 500 ）：
  • 按升序查找指定值与 500 之间的可用权重；
  • 如果未找到匹配项，按 降序 查找小于指定值的可用权重；
  • 如果未找到匹配项，按 升序 查找大于 500 的可用权重。
• 如果指定值小于 400 ，按 降序 查找小于指定值的可用权重。如果未找到匹配项，按 升序 查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。
• 如果指定值大于 500 ，按 升序 查找大于指定值的可用权重。如果未找到匹配项，按 降序 查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。

以上策略意味着，如果一个字体只有 normal 和 bold 两种粗细值选择，指定粗细值为 100-500 时，实际渲染时将使用 normal ，指定粗细值为 600-900 时，实际渲染时将使用 bold 。

相对粗细值的解析

当指定的是相对粗细值 lighter 或 bolder 时，将使用如下图表来决定元素渲染时的绝对粗细值：

常见粗细值名称和数值对应

100 到 900 之间的数值大致对应如下的常见粗细值名称：

100

Thin(Hairline)

200

Extra Light(Ultra Light)

300

Light

400

Normal

500

Medium

600

Semi Bold(Demi Bold)

700

Bold

800

Extra Bold(Ultra Bold)

900

Black(Heavy)

插值规律

font-weight 数值采取离散式定义（使用 100 的整倍数）。数值为实数，非 100 的整数倍的值将被四舍五入转换为 100 的整倍数，遇到*50 时，将向上转换，如 150 将转换为 200 。

实例

//HTML
<p>
  alice was beginning to get very tired of sitting by her sister on the
  bank, and of having nothing to do: once or twice she had peeped into the
  book her sister was reading, but it had no pictures or conversations in
  it, 'and what is the use of a book,' thought alice 'without pictures or
  conversations?'
</p>

<div>i'm heavy<br/>
  <span>i'm lighter</span>
</div>

//CSS

/* set paragraph text to be bold. */
p {
  font-weight: bold;
}

/* set div text to two steps darker than
   normal but less than a standard bold. */
div {
 font-weight: 600;
}

/* sets text enclosed within span tag 
   to be one step lighter than the parent. */
span {
  font-weight: lighter;
}