加了仍闪烁，是因为preload只提前下载字体，不控制应用时机；必须配合font-display: swap、路径与@font-face完全一致、crossorigin和as="font"等要素全部对齐，才能切断重排链。
为什么 <link rel="preload"> 加载字体还是有闪烁
不是加了 preload 就能防闪烁——关键在于字体加载时机和 CSS 渲染流程没对齐。浏览器预加载字体后，仍需等 CSS 中的 @font-face 解析、字体下载完成、文本重排（reflow）触发，才会应用新字体。如果页面首屏文本已渲染（用系统默认字体），再换字体，就闪。
-
preload只负责提前下载字体文件，不控制应用时机 - 必须配合
font-display: swap，否则字体加载完成前文本会不可见（FOIT） -
preload的as="font"和type属性缺一不可，否则可能被忽略或降级为普通 fetch - 字体文件路径必须与
@font-face中src的 URL 完全一致（含查询参数、大小写），否则缓存不命中，等于白 pre
<link rel="preload"> 的写法和位置要求
必须放在 里，且在任何引用该字体的 CSS <link> 或 <style></style> 之前。否则浏览器解析到 CSS 时还没知道要预加载，就会先走常规字体请求流程。
- 正确顺序：
<link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin>→ 然后才是<link rel="stylesheet" href="styles.css"> -
crossorigin属性必须加（即使字体同源），因为字体是匿名模式（anonymous）加载，不加会导致预加载失败且无提示 -
type建议明确写上，如font/woff2，避免 MIME 类型不匹配导致预加载被跳过
<link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin><link rel="stylesheet" href="styles.css">
如何验证预加载是否生效
打开 Chrome DevTools → Network 标签页 → 刷新页面 → 找字体文件 → 看 Initiator 列是否为 Preload，Status 是否为 200（非 304 或 from memory cache）。如果显示 Other 或 Stylesheet，说明预加载没起作用。
- 检查字体文件是否真的被请求两次：一次是
preload，一次是 CSS 中@font-face触发——这是正常现象，但第二次应为from memory cache或from disk cache - 若字体文件 size 显示为 0 或 status 是
cancelled，大概率是crossorigin缺失或路径不一致 - 用
performance.getEntriesByType('resource')查看实际加载时间，确认fetchStart是否显著早于requestStart（即预加载确实提前触发）
比 preload 更稳的防闪烁组合方案
单靠 preload + font-display: swap 在弱网或高并发下仍可能闪。真正减少可见闪烁，得控制文本渲染节奏。
- 给关键文本容器加
class="font-loaded"，初始设visibility: hidden；JS 监听document.fonts.load()成功后再移除 class - 避免在
@font-face中声明多个format()（如同时写woff2和woff），浏览器可能因格式探测延迟应用字体 - 如果用 Google Fonts，别直接嵌入
<link href="https://fonts.googleapis.com/...">，改用fontsource或自托管 +preload，可控性更强
字体加载不是“加个标签就完事”的事，它卡在 CSSOM 构建、字体回流、布局重排这一整条链路上。任何一个环节断点，都会让 preload 失效。最常被忽略的是路径一致性与 crossorigin——这两项错一个，就等于没写 preload。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
