CSS字体加载与回退机制。

网页字体的回退行为由三件事共同决定：font-family 的兜底链、@font-face 里的 font-display、以及 unicode-range 分片。想同时拿到快的首屏和不跳动的排版，最稳的组合是「font-display: swap（或 optional）+ 完整系统字体兜底栈 + preload 关键字体 + size-adjust 抹平度量差」。

font-family 是一条从左到右的匹配链

结论：浏览器按 font-family 声明顺序从左往右找，碰到第一个「存在且覆盖该字符」的字体就用，全都不命中才落到通用族关键字。

所以链尾必须写 serif / sans-serif / monospace / system-ui 这类通用族。中英混排时西文字体通常不含汉字，浏览器会自动往后继续找有汉字覆盖的字体，因此「西文在前、中文在后」是正确姿势：

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

两个易踩的坑：含空格的字体名必须加引号，否则整条声明可能被解析器丢弃；不要在 CSS 里用 @import 引字体，它会阻塞样式解析，直接写 @font-face 或 HTML 里的 <link> 更合适。

font-display 决定「等还是不等」

结论：font-display 是回退机制的核心开关，它用 block 期（字体没到先用不可见占位）和 swap 期（先用回退字体渲染、字体到了再换）两个时间段描述浏览器的取舍。

• block：约 3s 阻塞期，文字不可见（FOIT），随后无限等待交换；
• swap：0 阻塞期，立刻用回退字体显示，字体随时到达随时换（FOUT），最常用的折中；
• fallback：约 100ms 阻塞期 + 约 3s 交换期，超时就不再换；
• optional：约 100ms 阻塞期、无交换期，字体没赶上这一屏就直接用回退，但浏览器会缓存它供下次导航使用——首屏最快，代价是首次访问看不到自定义字体；
• auto：交给浏览器决定，通常接近 block。

正文文字建议 swap，装饰性标题字体建议 optional。不支持该属性的老浏览器会直接忽略，继续按默认行为走。

unicode-range：让中文只下载用到的那一片

结论：中文字体动辄几 MB，靠 unicode-range 拆成子集分片后，浏览器只会下载页面实际用到的那几片。

@font-face {
  font-family: "Noto Sans SC";
  src: local("PingFang SC"), url("noto-sc-subset.woff2") format("woff2");
  unicode-range: U+4E00-9FFF;
  font-display: swap;
}

src 里的 local() 优先复用用户本机字体，命中就一个请求都不发。自托管中文子集可用 pyftsubset（fonttools）按常用字表切分，商用字体注意授权是否允许切割和自托管。

preload + size-adjust：把「闪一下」压到最小

结论：字体文件不会被 HTML 解析器主动发现，必须显式 preload；而回退字体与自定义字体的字面高度、行高不同会造成 CLS，用度量覆盖可以对齐。

<link rel="preload" as="font" type="font/woff2"
      href="/fonts/inter.woff2" crossorigin>

crossorigin 不能省——字体请求始终是 CORS 请求，缺了它浏览器会下载两次。度量对齐则是给回退字体单独定义一个 @font-face：

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
}

然后把 "Inter Fallback" 插在自定义字体后面。像 Clara BBS 这类无编译缓存、保存即生效的轻量系统，改完字体栈刷新页面就能看到效果，不需要清缓存或重新构建，调试起来反而更直接。

怎么确认自己写对了

结论：用 DevTools 和 CSS Font Loading API 两条路验证，比肉眼盯着看靠谱。

DevTools 的 Network 面板按 Font 过滤，重点看两件事：同一个字体是不是被下了两次（多半缺 crossorigin）、被 preload 的字体有没有真的被用上（没用上就是白占带宽）。控制台里 document.fonts.check('16px "Inter"') 返回布尔值判断字体是否可用，document.fonts.ready.then(...) 可在字体全部就绪后做二次布局微调。Performance 面板里看 CLS 归属元素，字体交换造成的位移基本都能定位到具体节点。

收个尾：回退链负责「找不到怎么办」，font-display 负责「等不等」，unicode-range 和 preload 负责「少下点、早点下」，size-adjust 负责「换字体别跳」——这四件事都覆盖到，字体这一块基本不会翻车。