跨域字体preload必须加crossorigin，因为浏览器对字体资源强制执行CORS检查，即使同源也需显式声明；漏写会导致预加载静默失败、字体回退、首屏渲染异常；正确写法为crossorigin或crossorigin="anonymous"，且服务端必须返回Access-Control-Allow-Origin响应头。
为什么跨域字体 preload 必须加 crossorigin
浏览器对字体资源有特殊的安全策略：即使你只用 as="font"，只要字体文件来自不同源（比如 CDN），就必须走 CORS 流程。否则预加载会静默失败——资源不加载、控制台无报错、字体回退到系统默认，首屏文字渲染直接糊掉。
关键不是“要不要跨域”，而是“字体本身触发 CORS 检查”。哪怕字体和页面同域，现代浏览器（Chrome 90+、Firefox 85+）也建议显式加 crossorigin，避免未来迁移 CDN 时出问题。
crossorigin 值该填什么，填错会怎样
只写 crossorigin（无值）或 crossorigin="anonymous" 是安全的等价写法，浏览器以匿名 CORS 模式发起请求；服务端响应头必须包含 Access-Control-Allow-Origin: * 或具体域名。
-
crossorigin="use-credentials"会带上 cookie 和认证头，但绝大多数 CDN（如 Cloudflare、jsDelivr、unpkg）不支持该模式，返回 400 或 CORS 失败 - 漏掉
crossorigin属性 → 预加载被忽略，font-display: swap也救不回来 - 写了
crossorigin=""但服务端没返回Access-Control-Allow-Origin→ 请求卡在 pending 状态，后续字体加载阻塞
WOFF2 字体 preload 的最小正确写法
不需要 type 属性也能工作，但加上更稳妥（尤其当 CDN 不设 MIME 类型时）。实际部署中，以下写法已覆盖 99% 场景：
立即学习“前端免费学习笔记（深入）”；
<link rel="preload" href="https://cdn.example.com/fonts/inter-v12-latin.woff2" as="font" type="font/woff2" crossorigin>
注意三点：
-
href必须是绝对 URL 或根路径（/fonts/xxx.woff2），相对路径在某些构建工具里会被错误解析 -
as="font"不能写成as="stylesheet"或as="script"，否则浏览器不会按字体逻辑处理 MIME 和缓存 - 如果同时预加载多个字体变体（Regular / Bold / Italic），每个都要单独写一条
<link>，不能合并
容易被忽略的兼容性坑
Firefox 对 crossorigin 的校验比 Chrome 更严格：如果服务端返回了 Access-Control-Allow-Origin: https://your-site.com（非通配符），而你用了 crossorigin 无值写法，Firefox 会拒绝加载；Chrome 则容忍。所以务必确认服务端响应头匹配前端写法。
另一个隐性问题：某些老旧 CDN 缓存了不含 CORS 头的老版本字体响应，即使你改了 HTML，也要清 CDN 缓存并验证响应头是否真实生效——用 curl -I 或 Network 面板看 Access-Control-Allow-Origin 是否存在且值正确。
