CSS 描述符 font-weight 允许作者在 @font-face at 规则中为指定的字体指定字体权重。
描述符 font-weight 可以专门用于指定字体的 face'e 粗细，即字体应该看起来有多粗或多细。这些字体对应于同一字体系列的不同样式。
描述符 font-weight 的值与其对应的 font-weight 属性的值相同。
不应将描述符 font-weight 与 font-weight 属性混淆。描述符 font-weight 仅与 @font-face 规则一起使用，以显式为该规则选择粗体字体。然后，在样式表中的其他位置使用 font-weight 属性，将该字体权重应用于元素。
对于特定的字体系列，有一些有限的权重可用，如果不存在指定的权重，则使用附近的权重。没有粗体字体的字体由用户代理合成。为了避免这种情况，可以使用简写属性 font-synthesis。
可能的值
CSS 描述符 font-weight 可以具有以下值之一：
- normal：指定正常字体粗细，等于 400。
- bold：指定粗体字体粗细，等于 700。
- <number>：指定 1 到 1000（含）之间的<number>值。较高的值对应于较粗的字体，而不是较低的值。
语法
font-weight = auto | normal | bold | <number [1,1000]> ]";
CSS font-weight - 权重名称映射
下表说明了数值及其对应的通用权重名称的映射：
| 值 | 常用砝码名称 |
|---|---|
| 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) |
CSS font-weight - 可变字体
许多字体都有特定的权重，对应于通用权重名称映射中的一个数字，如上表所示。但是有些字体在很大程度上支持一系列细粒度的权重，这些字体被称为可变字体。它们使用户能够更好地控制他们选择的字体粗细。
TrueType 或 OpenType 变量字体的 wght 变体在实现变化的权重时很有用。
辅助功能问题：font-weight 等于 100（细/发际线）或 200（额外浅）的字体，尤其是在对比度颜色比率低的字体的情况下，对于视力不佳的人来说可能不是很清楚。
CSS font-weight - 数字值
以下示例演示了字体的权重值设置，使用 @font-face 规则内使用的范围 100 和 900：
<html>
<head>
<style>
@font-face {
font-family: "f1";
src: url("font/Brygada1918-Italic.ttf");
font-weight: 100,900;
}
.container {
font: 2.5rem "f1", sans-serif;
}
.font-wt-400 {
font-weight: 400;
}
.font-wt-bold {
font-weight: bold;
}
.font-wt-900 {
font-weight: 900;
}
</style>
</head>
<body>
<p class="container font-wt-400">font - 400</p>
<p class="container font-wt-bold">font - bold</p>
<p class="container font-wt-900">font - 900</p>
</body>
</html>
