preload字体仍FOIT的根本原因是漏写as="font"、crossorigin或href与@font-face的src路径不一致，导致浏览器无法识别为字体资源，不触发高优先级加载和字体回退逻辑。
preload 是解决首屏字体渲染卡顿最直接有效的手段，但错用比不用更糟——它会抢占关键资源带宽，反而延长文本可见时间（FOIT）。
为什么 preload 加了字体却还是 FOIT？
常见错误是只写 ，漏掉关键属性。浏览器无法识别资源类型，就按普通二进制文件处理，不参与字体加载管线，也不触发字体回退逻辑。
- 必须加
as="font"，否则无效 - 必须加
crossorigin属性（即使字体在同域，Chrome 也强制要求） -
type推荐显式声明为type="font/woff2"，避免 MIME 类型误判 - href 路径要和后续
@font-face中src的 URL 完全一致（含大小写、斜杠、查询参数）
preload 和 @font-face 怎么配对才不浪费？
两者不是独立配置，而是一套协作机制：预加载只是“提前取货”，@font-face 才是“正式签收”。若不匹配，浏览器会重复下载。
- 确保
@font-face的src值与preload的href字符串完全相同 - 不要给同一个字体写多个
preload，尤其避免不同font-weight或font-style共用一个 URL 却未做子集切分 - 中文字体体积大，建议先用
font-spider或pyftsubset提取首屏所需字形，再预加载子集文件
移动端或暗色模式下要不要条件预加载？
可以用 media 属性做条件触发，但要注意它只控制“是否发起请求”，不控制“是否被使用”。容易导致小屏设备也下载高清字体文件后丢弃。
- 慎用
media="(prefers-color-scheme: dark)"预加载暗色专用字体——除非你真有两套独立字体且 CSS 明确按 scheme 切换font-family - 更稳妥的做法是统一预加载主字体，靠
font-display: swap保证文本始终可见，再由 CSS 控制渲染样式 - 系统字体（如
-apple-system、Segoe UI）无需预加载，它们零网络开销
真正容易被忽略的点是：预加载字体后，如果页面 JS 动态修改了 font-family 或插入了新样式表，浏览器不会自动复用已预加载的字体实例——得靠开发者确保所有引用路径、字体族名、权重定义都严格对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
