HTML字体加载闪烁优化与替代方案

先说几个核心判断：font-display: swap 不是“试试看”的可选优化，而是必须配置的底线。它当然不能彻底消灭闪烁，但它能把令人困扰的“空白闪”（FOIT）换成更可控的“替换闪”（FOUT）——只要 fallback 字体选得对、预加载配得准，用户几乎感知不到异常。

但这套方案有个硬性条件：font-display: swap 必须配合 format("woff2")、preload（带 crossorigin 和 as="font"）、同类型 fallback 字体链，以及 document.fonts.ready 一起使用——缺一个，效果都可能打折扣。

font-display: swap 必须写在 @font-face 里，且 format() 不能漏

很多项目明明写了 font-display: swap，但就是没效果。原因很简单：浏览器压根没认它。常见翻车点有三个：

• @font-face 里的 src 没声明 format("woff2")，比如只写 url("Inter.woff2")。旧版 Edge、Safari 11 会直接跳过这条规则，然后乖乖退回默认的 block 行为。
• 字体路径用了相对路径（如 url(./fonts/Inter.woff2)），在 file:// 协议下很容易 404，导致整个 @font-face 失效。
• 用了 @import 来引入字体 CSS。这会让预加载失效，也会延迟解析时机。

正确的写法长这样：

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter.woff2") format("woff2");
  font-display: swap;
}

preload 关键字体要带 crossorigin 和 as="font"

只靠 font-display: swap 还不够——swap 的“窗口期”有多长，取决于字体文件什么时候开始下载。 能提前触发请求，但配置错了，等于白折腾。

需要警惕的是：

• 必须加 crossorigin 属性，否则字体不会被预加载（CORS 策略要求匿名请求必须显式声明）。
• as="font" 和 type="font/woff2" 缺一不可，否则浏览器可能把它当成普通资源处理，不会提升优先级。
• 千万别给所有字体都 preload。图标字体、小字号注释字体，预加载的收益很低，反而会挤占 HTTP/2 的连接资源。

正确写法长这样：

fallback 字体链要同类型、度量相近，别混衬线和无衬线

写了 swap 还看到文字“跳一下”？别急着怀疑方案有问题。这通常不是 bug，而是 fallback 字体跟 Web Font 的 x-height、字宽、行高差异太大，导致布局重排（CLS）。解决问题的关键不在换方案，而在选对 fallback：

• 优先用同类型链。比如 "Inter", "system-ui", -apple-system, BlinkMacSystemFont, "Segoe UI"，全是无衬线，视觉上过渡自然。
• 避免混用 "Georgia", "Inter"。衬线 vs 无衬线，字宽差经常超过 20%，跳变非常明显。
• 中文字体 fallback 要分平台写清楚。比如 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif，不能只靠英文 fallback 蒙混过关。
• 测试时打开 Chrome DevTools → Rendering → “Layout Shift Regions”，能直观看到哪些段落因字体替换发生了重排。

document.fonts.ready 比单次 load() 更可靠

想等字体真正可用再做交互（比如动画启动、内容 reveal）？别只调一次 document.fonts.load("400 16px 'Inter'")——它只检测那个字重和字号是否就绪，不保证 700 或 italic 变体也加载完了。

• 用 document.fonts.ready，它返回一个 Promise，代表所有已声明的 @font-face 都完成加载或失败。
• 如果需区分成功/失败，可以结合 document.fonts.check() 做兜底判断。
• 注意：iOS Safari 对 document.fonts API 支持不稳定，关键场景建议加 timeout 降级逻辑。

一个简单的等待示例：

document.fonts.ready.then(() => {
  document.documentElement.classList.add('fonts-loaded');
});

说实话，真正难的从来不是加哪行 CSS。难点在于：让 fallback 字体在视觉上“假装”是目标字体。这需要查真实度量值、测多端渲染、压测弱网下的 swap 窗口。别指望一份配置能通吃所有设备和网络环境——扎实的测试和调试，才是根除闪烁的真正法宝。