font-display: swap 是必须配置的底线，需配合 format("woff2")、preload（带crossorigin和as="font"）、同类型fallback字体链及document.fonts.ready使用，缺一不可。
font-display: swap 是必须加的底线配置，不是“试试看”的可选优化。 它不能彻底消灭闪烁，但能把你面对的“空白闪”（FOIT）换成更可控的“替换闪”（FOUT）——只要 fallback 字体选得当、预加载配得准，用户基本感知不到异常。
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，而不是直接写在主样式表或用<link>加载 —— 这会让预加载失效，也延迟解析时机
正确写法示例：
@font-face {
font-family: "Inter";
src: url("/fonts/Inter.woff2") format("woff2");
font-display: swap;
}
preload 关键字体要带 crossorigin 和 as="font"
只加 font-display: swap 不够，swap 的“窗口期”长短取决于字体文件何时开始下载。<link rel="preload"> 能提前触发请求，但配置错就等于没写：
- 必须加
crossorigin属性，否则字体不会被预加载（CORS 策略要求匿名请求显式声明） -
as="font"和type="font/woff2"缺一不可，否则浏览器可能当成普通资源处理，不提升优先级 - 不要给所有字体都 preload —— 图标字体、小字号注释字体，预加载收益低，还挤占 HTTP/2 连接
正确写法示例：
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
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.fontsAPI 支持不稳定，关键场景建议加 timeout 降级逻辑
简单等待示例：
document.fonts.ready.then(() => {
document.documentElement.classList.add('fonts-loaded');
});
真正难的不是加哪行 CSS，而是让 fallback 字体在视觉上“假装”是目标字体——这需要查真实度量值、测多端渲染、压测弱网下的 swap 窗口。别指望一份配置通吃所有设备和网络环境。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
