CSS 字体粗细 font-weight：加粗与 100 到 900 数值

如何在 CSS 中让文字加粗

font-weight 设置字母笔画的粗细。bold（等同于 700）让文字加粗，normal（等同于 400）是常规文字。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font weight</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 6px 0; }
    .normal { font-weight: normal; }
    .bold { font-weight: bold; }
    .heavy { font-weight: 900; }
    h2.plain { font-weight: normal; }
  </style>
</head>
<body>
  <p class="normal">font-weight: normal (400)</p>
  <p class="bold">font-weight: bold (700)</p>
  <p class="heavy">font-weight: 900</p>
  <h2 class="plain">A heading with font-weight: normal</h2>
</body>
</html>

标题、<th>、<b> 和 <strong> 因为浏览器自带的样式表而默认加粗，所以要去掉加粗，就用 font-weight: normal。至于在 HTML 本身中何时使用 <b> 或 <strong>，参见 HTML 加粗。

数值刻度：100 到 900

这些数字都有字体家族遵循的标准名称：

1 到 1000 之间的任何数字都有效，所以 450 和 650 也可以。能不能看出区别取决于字体：浏览器只能画出字体实际包含的粗细。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Weight scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-weight: 100;">100 Thin</p>
  <p style="font-weight: 200;">200 Extra Light</p>
  <p style="font-weight: 300;">300 Light</p>
  <p style="font-weight: 400;">400 Normal</p>
  <p style="font-weight: 500;">500 Medium</p>
  <p style="font-weight: 600;">600 Semi Bold</p>
  <p style="font-weight: 700;">700 Bold</p>
  <p style="font-weight: 800;">800 Extra Bold</p>
  <p style="font-weight: 900;">900 Black</p>
</body>
</html>

system-ui 是操作系统的界面字体，通常带有很多种粗细。如果上面每一行看起来都只是两种粗细之一，说明你的系统字体只有常规体和粗体。

为什么设置了粗细却没有变化

一个字体由一组文件组成，通常每种粗细一个文件。当缺少确切的粗细时，浏览器会选择它拥有的最接近的那个：

• 对于 500，先找 500，然后找更细的，再找更粗的。
• 对于 600 及以上，先找更粗的，然后找更细的。
• 如果完全没有粗体文件，大多数浏览器会把常规字母加厚，模拟出一个粗体（合成粗体）。

把一个有很多粗细的字体和 serif 对比一下，serif 在大多数系统上只有常规体和粗体：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Missing weights</title>
  <style>
    body { font-size: 22px; color: #111827; }
    .col { display: inline-block; vertical-align: top; margin-inline-end: 32px; }
    .sans { font-family: system-ui, sans-serif; }
    .serif { font-family: Georgia, serif; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <div class="col sans">
    <p style="font-weight: 300;">300 sans</p>
    <p style="font-weight: 500;">500 sans</p>
    <p style="font-weight: 600;">600 sans</p>
  </div>
  <div class="col serif">
    <p style="font-weight: 300;">300 serif</p>
    <p style="font-weight: 500;">500 serif</p>
    <p style="font-weight: 600;">600 serif</p>
  </div>
</body>
</html>

在 serif 那一栏里，300 和 500 通常会退回到常规体，600 退回到粗体。大多数“font-weight 不起作用”的问题，答案就在这里：CSS 没错，是字体缺少这个粗细。可变字体（一个带有粗细轴的文件）能平滑地画出其粗细范围内的每一个值。

bolder 和 lighter

bolder 和 lighter 相对于元素继承到的粗细。它们会跳到下一个粗细档位，而不是增加一个固定的量：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bolder and lighter</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    .bolder { font-weight: bolder; }
    .lighter { font-weight: lighter; }
  </style>
</head>
<body>
  <p style="font-weight: 400;">400 with <span class="bolder" id="a">bolder</span> and <span class="lighter" id="b">lighter</span></p>
  <p style="font-weight: 700;">700 with <span class="bolder" id="c">bolder</span> and <span class="lighter" id="d">lighter</span></p>
  <p id="out"></p>
  <script>
    const w = (id) => getComputedStyle(document.getElementById(id)).fontWeight;
    document.getElementById('out').textContent =
      'computed: ' + w('a') + ', ' + w('b') + ', ' + w('c') + ', ' + w('d');
  </script>
</body>
</html>

实际用法：用变量定义一套粗细

为整个网站挑选三四种粗细并给它们命名，而不是到处散落数字：

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}
body   { font-weight: var(--weight-regular); }
button { font-weight: var(--weight-medium); }
h1, h2 { font-weight: var(--weight-bold); }

常见错误

• 以为每个数字看起来都不一样。 只有字体包含的粗细才会显示出区别。
• 用 <b> 做按钮文字。 用 font-weight 设置按钮样式；<b> 和 <strong> 留给正文文字。
• 给数字加引号。 font-weight: "700" 是无效的，会被忽略。应写成 font-weight: 700。
• 到处用加粗来强调。 所有东西都加粗，就没有东西突出了。正文保持 400。
• 小字用很细的粗细。 100 到 300 在小字号下很难阅读，在低对比度背景上尤其如此。