font-weight 与 bold 的对应

本页目录

font-weight 表达的是「我想要多粗」，不是「选哪个文件」。你写 700，浏览器去 @font-face（或系统字体）里找声明为 700 的 face；找不到，就按一套固定规则挑最接近的，再不行就合成一个。

关键字与数值

关键字	等价数值
`normal`	400
`bold`	700

数值范围 1–1000。传统上只用 100 的倍数（100 Thin … 900 Black），CSS Fonts 第 4 版起允许任意整数，但能不能真的画出来取决于字体有没有那个粗细——静态字体只有离散的几个，变量字体才有连续区间。

bold 就是 700 这个数值的别名，不是「在当前基础上加粗」。写了 font-weight: bold 而父级是 600，结果仍然是 700，不是 800。

真正相对父级变化的是 bolder / lighter：它们按父元素的计算值查一张映射表，跳一档。这张表在 CSS Fonts 规范里，写死几个档位，所以连续用 bolder 几次的效果并不是线性的。

简化成三条（细节见 CSS Fonts 的 font matching 一节）：

关键结论：声明 400 和 700 两个 face 时，font-weight: 500 会拿到 400（因为 400 落在「先往上找」的范围内且更近）。所以想做 Medium，就得真的声明一个 500 的 face。

@font-face {
  font-family: 'InterVariable';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
}

之后 font-weight: 350、427 都有效——它落在 100–900 这个区间里，渲染引擎会插值。

这也是 font-weight: 400 700 这种区间写法只出现在 @font-face 里的原因：那是「这个文件覆盖 400 到 700」，而普通规则里的 font-weight 只能是单值。

如果只声明了 400，却要求 700，浏览器可以现场把字形「加粗描边」——这叫合成粗体（synthetic bold）。同理，没有斜体时会合成倾斜。

合成出来的效果通常很糟：笔画粘连、字宽不变、字重不协调。所以：

body {
  font-synthesis: none;
}

表示「宁可不要粗体，也别合成」。本站的排版预览区就是这么设的——预览要显示字体的真实样子，而不是浏览器加工后的样子。

font-weight 会继承。bolder / lighter 依赖父元素的计算值，所以把它写在嵌套结构里时，结果取决于祖先链，而不是你眼前那个元素。

调试时看开发者工具的 Computed 面板：那里显示的才是最终用来匹配 face 的数值。