<link rel="preload" as="font">必须配crossorigin="anonymous"，否则跨域字体因CORS校验失败而静默降级；服务端需返回匹配的Access-Control-Allow-Origin响应头，且CSS中的@font-face引用无法通过stylesheet标签的crossorigin解决。
link rel="preload" as="font" 必须配 crossorigin="anonymous"
只有 <link rel="preload" as="font"> 场景下，crossorigin 才真正影响字体加载成败。浏览器对跨域字体文件执行严格 CORS 校验，不加或值错误会导致字体静默失败、fallback 到系统字体，控制台可能只报 Failed to load resource 或完全无提示。
必须显式写 crossorigin="anonymous"，不能只写 crossorigin 或留空——部分构建工具（如 Vite 插件）会忽略模糊写法，导致预加载请求不带 Origin 头，服务端无法返回匹配的响应头。
<link rel="preload" as="font" href="https://cdn.example.com/font.woff2" crossorigin="anonymous">- 若用
use-credentials，服务端必须返回精确域名的Access-Control-Allow-Origin和Access-Control-Allow-Credentials: true；但绝大多数公开字体 CDN（Google Fonts、Fontsource）只支持anonymous - 动态插入时，必须在
appendChild()前设置属性：link.crossOrigin = 'anonymous'，否则无效
服务端响应头必须匹配，否则字体白加载
前端加了 crossorigin="anonymous" 只是发起 CORS 请求的“声明”，真正决定字体能否加载的是服务端是否返回合法响应头。常见失效不是前端漏写，而是服务端配置没对齐：
- CDN（如 Cloudflare、S3、Nginx）需显式配置：返回
Access-Control-Allow-Origin: *或精确域名（如https://your-site.com） - 若字体 URL 带查询参数（如
?v=2.1），确认缓存策略透传了 CORS 响应头；部分 CDN 默认不缓存响应头，导致带参数的请求缺失Access-Control-Allow-Origin - Google Fonts 等公共服务已预置 CORS 头，但自建 CDN 或私有字体服务必须手动开启
rel="stylesheet" 加 crossorigin 对字体没用
很多方案误把 <link rel="stylesheet"> 的 crossorigin 当作解决字体问题的手段——这是错的。CSS 文件本身不包含字体二进制数据，它只是通过 @font-face 引用字体 URL。即使 CSS 加了 crossorigin，里面 url() 指向的字体文件仍需独立走 CORS 流程。
立即学习“前端免费学习笔记（深入）”；
真正要加 crossorigin 的，是字体资源本身的加载入口：要么是 <link rel="preload" as="font">，要么是 CSS 中 @font-face 的 src: url(...) 被浏览器自动发起的请求（此时无法手动加属性，只能靠服务端配响应头）。
- 不要给
<link rel="stylesheet">加crossorigin来“解决字体问题”——它只在 JS 读取document.styleSheets[n].cssRules时有意义 - 也不要给
<link rel="icon">或<link rel="manifest">加，这些标签根本不走 CORS 流程，属性被浏览器直接忽略
验证是否生效：看 Network 面板里的字体请求
别只检查 HTML 有没有写 crossorigin，关键看实际字体请求是否满足两个硬条件：
- Request Headers 里必须有
Origin字段（证明走了 CORS） - Response Headers 里必须有
Access-Control-Allow-Origin，且值与当前页面协议+域名完全匹配（比如页面是https://a.com，就不能是https://a.com/或https://www.a.com） - 字体文件加载成功后，在 DevTools 的 Elements 面板中检查
@font-face是否被应用；若 fallback 生效，说明字体未加载或加载后被拒绝
file:// 协议下所有 crossorigin 都被浏览器忽略，调试务必起本地 HTTP 服务（如 npx serve 或 vite preview）。
