漏掉crossorigin字体preload即静默失效，因浏览器强制要求CORS上下文才能启用FontLoader、高优先级加载及字体缓存池；缺此属性则降级为低优先级普通fetch，@font-face无法复用资源，导致FOIT持续。
为什么漏掉 crossorigin 字体 preload 就静默失效
浏览器对字体资源的加载有强制 CORS 上下文要求，哪怕字体和 HTML 同源，crossorigin 也必须显式存在——不是可选，而是加载链路的开关。漏写时，浏览器根本不会发起预加载请求（Network 面板里看不到该条目），或即使发了也拒绝把结果交给 @font-face 使用，导致 FOIT 持续出现。
-
crossorigin属性存在，才触发字体专用加载器（FontLoader），启用高优先级、CORS 请求头、独立 font 缓存池 - 漏掉
crossorigin→ 浏览器降级为普通 fetch，Priority 显示为Low，Initiator 是parser而非preload - 同源也不自动“绕过”：Chrome/Safari 会丢弃已下载字形数据，后续
@font-face仍要重新发起带 CORS 头的请求
crossorigin="" 和 crossorigin="anonymous" 有什么区别
二者在行为上等价，都是匿名 CORS 模式（不发送 Cookie 或认证凭据），但写法影响服务端兼容性。实际部署中，crossorigin（无等号、无引号）是最稳妥的选择。
-
crossorigin（空值语法）是 W3C 规范允许的合法写法，所有现代浏览器都支持，且对服务端 CORS 头校验最宽松 -
crossorigin="anonymous"功能相同，但部分 CDN 或老旧服务端会因严格匹配Access-Control-Allow-Origin响应头而拒绝 -
crossorigin="use-credentials"几乎不该用：字体服务极少支持凭据传输，启用后大概率触发 CORS 错误
crossorigin 写对了但控制台还报 CORS error 怎么办
说明服务端没返回匹配的响应头，不是前端代码问题。预加载能发出去，但字体引擎拒绝应用，因为跨域策略未通过校验。
- 检查服务端是否返回
Access-Control-Allow-Origin: *（公共 CDN）或Access-Control-Allow-Origin: https://yourdomain.com（私有域名） - 确保响应头中不含
Access-Control-Allow-Credentials: true（除非你真用了crossorigin="use-credentials"） - 如果字体托管在第三方 CDN，确认其文档是否明确支持字体跨域访问；有些 CDN 默认关闭字体 CORS 支持
href 和 @font-face 的 src 必须完全一致，包括大小写和查询参数
浏览器复用预加载字体的判断逻辑是字符串精确匹配，不是路径归一化。哪怕只差一个 ?v=1.2 或大小写不同，都会被当作两个资源。
立即学习“前端免费学习笔记（深入）”；
-
@font-face中写url('/fonts/Inter-Bold.woff2')，但<link>的href是/fonts/inter-bold.woff2→ 不复用 - 构建工具（如 Vite）自动注入哈希时，务必同步更新
<link rel="preload">的href，不能只改 CSS 里的src - 建议全部使用根相对路径（如
/fonts/inter-latin.woff2），避免协议、域名、端口差异引入意外不一致
as="font"、crossorigin、href 与 @font-face src 完全一致、服务端响应头合规。任意一环松动，缓存就进不去，FOIT 就停不下来。 
