font-display: swap不能根治fout/foit，因闪烁主因是fallback与web font度量不一致引发重排（cls）；必须配合@font-face内正确声明format("woff2")、preload（带crossorigin和as="font"）、同类型fallback字体链及size-adjust等措施才能有效抑制。
Webfont 闪烁（FOUT/FOIT）不是字体没加载完的问题，而是 fallback 字体与 Web Font 度量不一致导致的重排（CLS），单纯加 font-display: swap 只能换一种闪法，不能根治。
font-display: swap 必须写对位置，否则等于没写
它必须出现在 @font-face 规则内部，写在普通 CSS 类里完全无效。常见失效原因包括：
-
@font-face中src没声明format("woff2")，旧版 Safari 或 Edge 会直接跳过整条规则 - 用
@import引入含字体的 CSS 文件，导致预加载和解析延迟 - 本地开发用
file://协议，字体请求被 CORS 静默拦截，font-display根本没机会生效 - 路径写成相对路径如
url(./fonts/Inter.woff2)，在某些构建环境下解析失败
preload 字体必须带 crossorigin，否则白忙一场
<link rel="preload"> 不是加了就有效，浏览器对字体资源有严格校验：
- 必须显式加
crossorigin属性，哪怕字体同源——这是字体加载的强制要求 -
as="font"和type="font/woff2"缺一不可；写成as="fetch"或漏掉type，Chrome 会复用缓存但不触发字体解析 - 只对
font-display: swap或optional生效；设成block时，预加载反而可能延长阻塞时间
fallback 字体链决定是否“跳”，不是“闪”
写了 font-display: swap 还看到文字“一跳”，问题不在字体加载，而在 fallback 字体撑不开空间：
- 避免混用衬线与无衬线字体，例如
"Georgia", "Inter"—— 字宽差异常超 20%，必然引发 CLS - 中英文字体要分平台兜底：
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif - 慎用全局
line-height或font-size缩放，这会让 fallback 和 Web Font 基线错位 - 高阶方案：用
ascent-override和descent-override对齐 OpenType 度量，但需字体本身嵌入 OS/2 表且为 woff2 格式
DOM 层控制要等 fonts.ready，不能只靠 swap
font-display: swap 解决的是首次渲染，但 JS 动态插入文本、Canvas 绘制、或 SSR 水合后内容更新，仍可能因字体未真正就绪而回退到 fallback：
-
document.fonts.load()只检测指定字重字号，不保证全部变体就绪；多个字体需链式调用 - 真正可靠的信号是
document.fonts.ready，它返回 Promise，代表所有已声明字体完成加载与解析 - Canvas 绘制前必须
await document.fonts.ready，否则context.font = "42px 'MyFont'"可能被忽略 - 服务端渲染（SSR）水合时，若客户端字体未就绪，首帧仍可能闪 fallback，需结合
fonts.ready延迟 hydrate 或加 loading 状态
最常被忽略的一点：字体闪烁的“视觉可接受性”不取决于技术是否配齐，而取决于 fallback 字体能否在 x-height、cap-height、字宽上无限逼近 Web Font —— 这需要实测，尤其在 Windows 和 macOS 渲染引擎差异下，同一套 fallback 可能表现完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
