font-weight

**font-weight** CSS 描述符允许作者为在@font-face at 规则中指定的字体指定字体粗细。 font-weight 属性可以单独用于设置文本中字符的粗细显示方式。

对于特定的字体系列，作者可以下载对应于同一字体系列的不同样式的各种字体字形，然后使用 font-weight 描述符明确指定字体字形的粗细。CSS 描述符的值与相应的字体属性的值相同。

特定字体系列通常提供有限的粗细。当指定的粗细不存在时，将使用相近的粗细。缺少粗体字体的字体通常由用户代理合成。为防止这种情况，请使用font-synthesis 简写属性。

语法

css
/* Single values */
font-weight: normal;
font-weight: bold;
font-weight: 400;

/* Multiple Values */
font-weight: normal bold;
font-weight: 300 500;

font-weight 属性使用下面列出的任何一个值来描述。

值

normal

普通字体粗细。与 400 相同。

bold

粗体字体粗细。与 700 相同。

<number>

一个<number> 值，介于 1 和 1000 之间（含）。较高的数字表示比较低的数字更粗或与较低的数字一样粗的粗细。某些常用的值对应于常见的粗细名称，如以下常见粗细名称映射 部分所述。

在 font-weight 规范的早期版本中，该属性只接受关键字值和数字值 100、200、300、400、500、600、700、800 和 900；非可变字体实际上只能使用这些固定值，尽管细粒度值（例如 451）将被转换为这些值之一以用于非可变字体。

CSS 字体级别 4 扩展了语法，使其可以接受 1 到 1000 之间的任何数字（含），并引入了可变字体，它们可以利用这个更细粒度的字体粗细范围。

常见粗细名称映射

数值 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)

可变字体

大多数字体都有一个特定的粗细，它对应于常见粗细名称映射 中的数字之一。但是，某些称为可变字体的字体可以支持更多或更少细粒度的粗细范围，这可以使设计师更精确地控制所选的粗细。

对于 TrueType 或 OpenType 可变字体，"wght" 变体用于实现不同的粗细。

无障碍

患有弱视的人可能难以阅读设置为 font-weight 值 100（细/细线）或 200（极细）的文本，尤其是在字体具有低对比度颜色比率 的情况下。

正式定义

相关at 规则@font-face
初始值normal
计算值如指定

正式语法

font-weight = 
  auto                         |
  <font-weight-absolute>{1,2}  

<font-weight-absolute> = 
  normal             |
  bold               |
  <number [1,1000]>

示例

在 @font-face 规则中设置普通字体粗细

以下代码会查找本地 Open Sans 字体或导入它，并允许使用该字体以实现普通字体粗细。

css
@font-face {
  font-family: "Open Sans";
  src:
    local("Open Sans") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: 400;
}

规范

规范
CSS 字体模块级别 4
# font-prop-desc

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见