如何用CSS解决自定义字体加载闪烁问题？

font-display: fallback是多数场景最稳选择，它500ms内用系统字体渲染，超时即放弃加载，不阻塞布局也不强求替换，需配合preload和正确@font-face声明（含format("woff2")、各字重独立声明）才能解决90%闪烁问题。

font-display: fallback 是多数场景的默认选择

直接用 font-display: fallback，配 <link rel="preload"> 和正确 @font-face 声明，90% 的字体闪烁问题就没了。它不是“最快”，而是“最稳”：500ms 内用系统字体渲染，超时后放弃加载，不阻塞布局，也不强求替换。

中英文混排、首屏文案、表单文本都适合它。别只写 swap 就以为搞定——它在弱网或 iOS Safari 下反而容易闪得更明显。

fallback 对应行为是：先显示后备字体（如 sans-serif），若自定义字体在 500ms 内加载完成，则平滑替换；否则继续用后备字体，不再等。

它比 swap 更克制：避免用户长时间看到不一致排版，也规避了 iOS Safari 对 swap 的激进实现（延迟替换 + 渲染卡顿）；比 optional 更可靠：后者依赖浏览器预估 100ms 内能否就绪，而实际网络波动会让这个判断失准，尤其对未缓存字体。

@font-face 里 font-display 怎么写才生效

必须写在每个 @font-face 规则内部，且只对该声明起作用。外层 CSS、<link> 或 JS 动态插入都无效。

常见错误是复制粘贴漏掉引号、拼错值（比如写成 swop 或 swap:），整个规则会被浏览器忽略——字体不加载，连 fallback 都没机会触发。

每个字重都要单独声明 @font-face，不能共用一个 font-family 名却只给其中某个加 font-display。中文字体必须为 Regular/Bold/Medium 等每种字重单独配 font-display，否则部分字重仍走默认策略。

src 中必须带 format("woff2")，漏写会导致 Safari、旧 Edge 直接忽略整条规则，退回到 auto 行为，引发 FOIT。

WOFF2 路径带跨域时，src 必须加 crossorigin，否则 iOS Safari 可能拒绝加载。

为什么写了 font-display 还在闪？检查 preload 是否配套

font-display 控制的是“怎么显示”，preload 控制的是“什么时候开始加载”。只设 fallback 不预加载，字体资源仍可能被浏览器排到低优先级，首屏文字已渲染完，字体才刚发起请求。

<link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin> 必须加 crossorigin，否则在跨域字体下失效，且后续 @font-face 可能报 CORS 错误。

只 preload 首屏真正需要的字重（比如标题用 Inter-Bold.woff2，正文用 Inter-Regular.woff2），不要把所有字重都预加载。

如果用了 HTTP/2 Server Push 或 HTTP/3，preload 价值进一步降低，反而增加头部复杂度；但对大多数站点，它仍是必要一环。

swap 不能单独解决文字抖动，必须配 size-adjust

font-display: swap 能解决白屏，但解决不了文字“突然变高/变矮”的抖动。swap 只是让系统字体先占位、等自定义字体加载完再替换，而两个字体的 x-height、line-height、字宽往往不一致——浏览器按回退字体度量分配空间，替换时重排，CLS（累积布局偏移）就来了。

常见现象包括：标题加载后整体下移几像素、导航栏图标错位、按钮内文字换行点突变。本地没抖动但线上有，大概率是线上用了更高 DPR 屏幕或不同系统字体回退链。

必须搭配 font-family 回退链，例如：font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;，避免某些 Android 设备 fallback 到过粗的 Droid Sans。

size-adjust 才是控制占位尺寸的关键，值通常在 95%～105% 之间，需实测。它只在 Chromium 和 Safari 17.4+ 生效，且必须和 font-display: swap 共存才起作用。操作步骤很直接：在 Chrome DevTools 的 Elements 面板中右键目标文本 → Force font substitution → 选系统默认字体，观察行高、基线、字宽变化；打开 Rendering 面板 → 勾选 Layout Shift Regions，刷新页面，看字体切换瞬间是否有红框闪烁；在 @font-face 中逐步试值：size-adjust: 100% → 102% → 103%，每次硬刷新验证红框是否减弱。

size-adjust 只接受带 % 的数值，不能写 1.03 或 103。