font-family 与回退栈

本页目录

font-family 的值是一个有序的候选列表。浏览器从第一个开始找：找得到就用，找不到就试下一个，直到撞上末尾那个「由浏览器决定」的类别。

它是一个列表

body {
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}

这条声明读作：「如果有 Inter 就用 Inter；没有就用苹方；再没有就用微软雅黑；系统界面字体也行；实在不行用任意无衬线字体。」

顺序就是优先级，不要把它理解成「这些字体混排」。混排是回退机制在字符级做的事（见下）。

末尾的通用族

serif、sans-serif、monospace、cursive、fantasy、system-ui、ui-monospace 这些不是字体名，而是类别，由浏览器或操作系统挑一个具体字体。

不写通用族的后果不是「没效果」，而是「回退到了浏览器的默认值」——那个默认值在不同浏览器里不一样，于是你的排版在不同环境里行高、字宽都不同。所以列表永远以通用族收尾。

引号与名字

字体名里有空格（Microsoft YaHei）或数字开头时，要加引号；
没有空格也可以加引号（'Arial'），加引号不会错，只是多余；
名字匹配大小写不敏感，但不要依赖这一点去写 arial；
别在名字里写「Bold」：font-family: 'Inter Bold' 只在系统真把它注册成独立家族时才有效。粗细用 font-weight 表达。

本机装了 ≠ 网页会生效

font-family: 'Inter' 只在两种情况下生效：

访客机器上装了 Inter；
或者你的页面用 @font-face 定义了一个叫 Inter 的字体族（见 @font-face 逐项）。

你自己电脑上装了，不代表访客装了。这也是本站「生成 CSS」的提示所讲的：那里生成的 font-family 写的是你本机的字体名，只能参考，直接粘到线上页面，访客机器上多半没有那个字体。

回退是按字符发生的

如果 Inter 里没有「中」这个字，浏览器不会整行换成别的字体，而是只把这一个字符交给列表里下一个有它的字体。于是同一行里可能同时出现两种字体，行高与基线也可能对不上。

这解释了两种常见现象：

中英混排时中文看起来「跳」或「挤」——中文来自回退字体，它的上下伸和西文不一样；
某个生僻字或 emoji 突然变了个样子——那是回退链里某个字体接住了它。

一个能用的写法

:root {
  --font-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

body {
  font-family: var(--font-sans);
}

code, pre {
  font-family: var(--font-mono);
}

把栈定义成自定义属性，全站只有一处需要改；等宽字体单独一条，别让代码块跟着正文一起换。

它是一个列表#

末尾的通用族#

引号与名字#

本机装了 ≠ 网页会生效#

回退是按字符发生的#

一个能用的写法#