font-display: swap 是必须配置的底线措施，它强制用备用字体立即渲染再替换自定义字体，避免foit/foft闪烁；须写在@font-face中，配合document.fonts.ready确保字体真正可用，并选用度量值相近的fallback字体。
font-display: swap 是解决字体加载期间闪烁（FOIT/FOFT）最直接有效的手段，不是“可选优化”，而是必须配置的底线措施。
为什么 font-display: swap 能止住闪烁
浏览器默认行为是：等字体加载完成或超时（约 3 秒）才渲染文字，造成“空白闪”（FOIT）；若用 fallback 字体但字宽差异大，又会导致“跳动闪”（FOFT）。font-display: swap 强制它立刻用备用字体撑开布局，等自定义字体就绪再替换——视觉不中断、布局不重排。
关键点：
-
font-display: swap必须写在@font-face规则里，单独加在普通 CSS 类上无效 - 它只对声明过的字体生效；没写
@font-face，document.fonts.load()会静默失败 - 本地开发用
file://协议时，字体请求会被跨域策略拦截，必须起 HTTP 服务（如npx serve）
document.fonts.load() 和 document.fonts.ready 怎么配合用
仅靠 swap 还不够：你无法知道字体何时真正“可用”于 Canvas 或动态插入文本。这时要用 JS 主动探测。
常见错误是只调一次 document.fonts.load("400 16px 'MyFont'") 就以为完事——但它只检测该字重字号是否就绪，不保证所有变体（如 700、italic）都加载完成。
实操建议：
- 多个字体需链式调用：
document.fonts.load("400 16px 'FontA'").then(() => document.fonts.load("700 16px 'FontB'")) - 真正代表“全部声明字体就绪”的是
document.fonts.ready，它返回 Promise，比单次load()更可靠 - Canvas 绘制前务必 await
document.fonts.ready，否则context.font = "42px 'MyFont'"可能被忽略
fallback 字体选错，swap 也白搭
就算用了 swap，如果备用字体和目标字体度量值（x-height、字宽、行高）差太多，文字还是会“跳”。这不是 bug，是 layout shift 的必然结果。
例如："Times New Roman", sans-serif 混搭，衬线 vs 无衬线，字宽差异常超 20%，CLS（累积布局偏移）直接超标。
选 fallback 的原则：
- 同类型优先：用
"Inter", "system-ui"替换 Inter；用"Source Code Pro", "ui-monospace"替换等宽字体 - 查实际度量：用 Font Style Matcher 工具对比 x-height、cap-height、ascender 等参数
- 避免混用
serif和sans-serif，除非你明确接受跳动并已做 CLS 补偿（如固定line-height、设min-width）
内联字体 or preload？别盲目二选一
内联 WOFF2（Base64）看似一劳永逸，但实际代价不小：CSS 文件体积激增，首次传输慢，且无法利用字体文件的独立缓存机制。只适合极小图标字体（
更普适的做法是 <link rel="preload"> + crossorigin：
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>-
crossorigin属性不能省，否则字体预加载会失败（即使同域） - WOFF2 格式必须提供，它是现代浏览器唯一强制支持的高效格式；WOFF 可作为降级兜底
真正容易被忽略的是：preload 只加速下载，不改变渲染逻辑——font-display 仍是控制是否闪烁的开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
