CSS 字体粗细体

CSS 字体粗细体属性 font-weight 用来设置文字的粗细程度。可以设置的值可以是数字、关键字、也可以是特定的名称。

数字值

数字值代表文字的粗细程度，按照惯例常用以下5个取值：

• 100 或 extra-light 表示极细；
• 200 或 light 表示细；
• 400 或 normal 表示标准；
• 700 或 bold 表示粗；
• 900 或 extra-bold 表示极粗。

例如：

p {
  font-weight: bold;
}

关键字值

• bold 表示文字加粗。一般为默认粗体的1.5倍宽度；
• bolder 表示文字更加粗。量级比 bold 更大；
• lighter 表示文字更加细。量级比 normal 更小；
• normal 表示标准字体。

例如：

p {
  font-weight: bolder;
}

特定名称

font-weight 的属性值还可以使用下列特定名称来设置。

• initial - 设置字体的粗细程度为默认值；
• inherit - 继承父元素的字体粗细程度；
• unset - 重置当前值为默认值。

例如：

h1 {
  font-weight: inherit;
}

以上为 font-weight 的属性值，将其应用到任何 HTML 元素上即可改变元素的字体粗细程度。

注意：并不是每个字体都支持每个 font-weight 值。如果你使用的字体不支持你选择的 font-weight 特定值，那么浏览器会自动地用最接近的那个 font-weight 特定值代替。如果没有从中选到一个值，那么浏览器会使用另一个机制估计细度（例如，本来是 bold，但它只支持 normal 和 bolder）。

参考文献：MDN web docs