font-display: fallback 不会替换字体，仅在约100ms内决定是否使用后备字体，之后永不替换；它只在@font-face中生效，需配合合理后备链与preload使用。
font-display: fallback 不会“切换”，它只做一次决策
很多人误以为 font-display: fallback 是“先等一会儿，再换字体”，其实它根本不会在加载完成后替换。它的行为是：给浏览器约 100ms 的极短等待窗口；若字体未就绪，立刻用后备字体渲染，并且**之后永远不再替换**——哪怕字体文件下一秒就下载完了，页面也不会重绘。
这和 swap 的“先显示后替换”有本质区别。如果你看到字体后期突然变了，那大概率不是 fallback 在起作用，而是你误用了 swap、或 JS 手动触发了 document.fonts.load() + 强制重排。
@font-face 中必须显式声明 font-display: fallback
font-display 只在 @font-face 规则里生效，写在普通 CSS 类（比如 .title { font-display: fallback; }）完全无效。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
@font-face {
font-family: "Inter";
src: url("inter.woff2") format("woff2");
font-display: fallback;
}
注意以下几点：
- 每个字重（
normal、700）、每个字族变体（如Inter Italic）都得单独写一条@font-face并配font-display - 如果用了 Google Fonts，
&display=fallback必须加在 URL 参数里，例如：https://fonts.googleapis.com/css2?family=Inter&display=fallback - 本地字体不支持自动推导 fallback 行为，不写
font-display就等于auto，即 Chrome 默认阻塞渲染 3 秒
后备字体选错会导致行高/宽度崩塌
即使 font-display: fallback 防住了闪屏，如果后备字体（比如 sans-serif）和自定义字体度量值差异太大，文字会“跳”——不是字体闪，而是布局重排：段落高度突变、按钮被撑开、图标错位。
解决办法不是换 font-display 值，而是控制后备链本身：
- 优先用
system-ui或-apple-system, BlinkMacSystemFont, "Segoe UI"这类与现代系统字体度量更接近的链 - 避免单写
serif或sans-serif，它们在不同平台渲染差异极大 - 对关键文本（如标题），可设固定
line-height（带单位，如line-height: 1.4），避免无单位值（如1.2）随字体 em 基准跳变
fallback 和 preload 能一起用，但别指望它“加速加载”
<link rel="preload" as="font" type="font/woff2" crossorigin href="inter.woff2"> 确实能提前拉字体，但它不影响 fallback 的决策逻辑：100ms 窗口照旧，只是这个窗口内加载成功的概率变高了。
真正要注意的是：crossorigin 属性不能省。WOFF2 字体预加载必须带 crossorigin，否则浏览器会静默忽略，甚至报 CORS 错误（尤其本地开发走 file:// 协议时）。
另外，fallback 不适合大体积字体（如含中文的 2MB woff2）。100ms 内几乎不可能加载完，结果就是全程用后备字体——品牌一致性直接丢失。这种场景该用 swap + preload + font-display: optional 组合试探缓存，而不是硬上 fallback。
