字体preload缓存不命中主因是url、crossorigin、content-type、cache-control四者未严格一致：路径大小写、查询参数、cors头缺失或不匹配、mime类型错误、缺少immutable头均导致无法进入font缓存池。
为什么字体 preload 缓存经常不命中
字体 preload 写对了、Network 面板里也看到 200 响应，但刷新后仍 FOIT（文字不可见），说明缓存根本没复用——问题不在“没加载”，而在“没进对的缓存池”。浏览器把 as="font" 加载的字体放进独立的 font 缓存区，这个区域只接受四者完全一致的后续请求：href 字符串（含大小写、查询参数）、crossorigin 属性值、服务端返回的 Content-Type、Cache-Control 头。
-
/fonts/Inter.woff2和/fonts/inter.woff2→ 路径大小写不一致，视为不同资源 - 漏写
crossorigin，或写了但服务端没返回匹配的 CORS 响应头 → 字体进不了 font 缓存，只进 fetch 缓存（后续@font-face不会读取） -
@font-face的src和preload的href差一个?v=1.2→ 浏览器拒绝复用 - 服务端返回
Cache-Control: no-cache或缺失immutable→ 即使路径全对，下次导航仍可能重新拉取
link preload 字体必须满足的四个硬性条件
让字体真正进缓存并被 @font-face 复用，不是“加了 preload”就行，而是整个链路标识必须对齐。以下四点缺一不可：
-
<link rel="preload" as="font" crossorigin href="/fonts/inter-latin.woff2" type="font/woff2">：必须带as="font"和crossorigin（同域也要加，否则 Chrome/Safari 直接丢弃已加载字形） -
type必须和服务端实际返回的 MIME 类型严格一致，比如服务端返回font/woff2，就写type="font/woff2"，不能写type="font/woff" -
@font-face的src值必须和href完全相同（建议全部用根相对路径，如/fonts/inter-latin.woff2） - 服务端响应头至少包含：
Cache-Control: public, immutable, max-age=31536000；immutable是关键，它告诉浏览器“此资源永不变更”，跳过 ETag/Last-Modified 验证
如何验证字体是否真被 font 缓存复用
别只看 Network 面板有没有 preload 请求，重点查三处：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在 Network 面板筛选
Initiator = preload，确认Priority是 Highest；若显示Low，大概率是as没写或写错 - 刷新页面后，找到对应字体请求，看
Status列是否为200 (from memory cache)或304；如果是200且没有(from memory cache)，说明没命中 - 打开
Application → Cache Storage，搜索字体文件名，看是否出现在 Font Cache 下（Chrome 115+ 支持）；若只在 Memory Cache 或 HTTP Cache 里，说明@font-face没触发 font 缓存读取
服务端配置与前端配合的常见疏漏点
字体缓存失效往往卡在服务端和前端协同环节，容易被忽略的细节包括：
- Nginx/Apache 配置中，
expires或Cache-Control没覆盖到字体后缀（如.woff2），导致返回默认无缓存头 - CDN 缓存策略未透传
crossorigin相关响应头，尤其当 CDN 默认剥离Access-Control-Allow-Origin时 - 本地开发服务器（如 Vite、Webpack Dev Server）默认不设
immutable，也常忽略Content-Type设置，测试阶段看似正常，上线即翻车 - 构建工具自动添加 hash 后，
@font-face中的src未同步更新（例如 Webpack 的file-loader或url-loader配置未启用name模板生成一致路径）
字体缓存最脆弱的地方不在单点配置，而在于四要素跨层对齐——URL、crossorigin、MIME、Cache-Control，任一环节大小写、空格、头缺失、路径拼接方式出错，都会让字体掉出 font 缓存池，回到 FOIT 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
