CSS @font-face - font-weight

font-weight CSS 描述符允许作者在@font-face @规则中指定指定字体的字体粗细。

font-weight 描述符专用于指定字体的粗细，即字体应显得多粗或多细。这些字体对应于同一字体系列的不同样式。

描述符font-weight采用与其对应的font-weight属性相同的值。

font-weight 描述符不应与font-weight 属性混淆。font-weight 描述符仅与@font-face @规则一起使用，以显式地为该规则选择粗体字体。然后，font-weight 属性在样式表中的其他位置使用，以将该字体粗细应用于元素。

对于特定的字体系列，可用的粗细有限，如果指定的粗细不存在，则使用附近的粗细。缺少粗体字体的字体由用户代理合成。为了避免这种情况，可以使用简写属性font-synthesis。

可能的值

font-weight CSS 描述符可以具有以下值之一

normal：指定普通字体粗细，等于 400。
bold：指定粗体字体粗细，等于 700。
<number>：指定1 到 1000（含）之间的<number> 值。较高的值对应于比较低值更粗的字体。

语法

font-weight = auto | normal | bold | <number [1,1000]> ]";

CSS font-weight - 权重名称映射

下表说明数值及其对应的常用权重名称的映射

值	常用权重名称
100	纤细 (发丝线)
200	超细 (超轻)
300	细
400	普通
500	中等
600	半粗体 (中粗体)
700	粗体
800	超粗体 (超粗)
900	黑色 (加粗)

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>

打印页面