必须显式写crossorigin（无等号无引号），因字体加载强制要求cors上下文，浏览器不自动降级；漏写或错写（如anonymous/use-credentials）会导致预加载数据被丢弃、@font-face重复请求，引发foit。
必须显式写 crossorigin，且值为空（不带等号、不带引号），不是可选，也不是写 crossorigin="anonymous"。
为什么 crossorigin 不能省，也不能乱写
字体加载强制走 CORS 流程，哪怕字体和 HTML 同源，浏览器也不会自动降级——没这个属性，预加载下载完也会被丢弃，@font-face 会重新发起一次带 CORS 头的请求，造成重复下载和 FOIT。
- 漏写
crossorigin→ 下载成功但不进字体缓存池，@font-face拿不到复用 - 写成
crossorigin="use-credentials"→ 几乎必然失败，字体服务极少支持凭据传输 - 写成
crossorigin="anonymous"→ Chrome/Safari 能工作，但部分 CDN 或旧服务端可能因头校验严格而拒绝响应 - 正确写法只有：
crossorigin（无等号、无引号、无值）
crossorigin 和服务端 CORS 响应头必须匹配
预加载能成功不代表字体能生效。服务端返回的响应头里，必须包含 Access-Control-Allow-Origin，且值要允许当前页面域名（比如 * 或具体域名）。
- 如果服务端没返回该头，Chrome 控制台通常只报一句模糊的
Font from origin 'xxx' has been blocked，没有明确错误码 - 用 curl 或 Network 面板检查字体资源响应头，确认有
Access-Control-Allow-Origin: *（或对应域名） - Nginx/Apache 配置漏加 WOFF2 的 MIME 类型（如
font/woff2）也可能导致 CORS 失效，因为类型不匹配时浏览器会拒绝复用
路径、as、type 必须和 @font-face 完全一致
浏览器判断能否复用预加载字体，靠的是 URL 字符串完全相等 + as="font" + crossorigin 存在 + 服务端 CORS 头合法。
-
href必须和@font-face中src: url(...)的值一模一样：协议、域名、路径、查询参数、大小写、末尾斜杠都不能差 -
type必须和服务端实际返回的Content-Type响应头严格一致，比如服务端返回font/woff2，就得写type="font/woff2" - 错写成
type="font/woff"或省略type，Chrome 可能降级为 Low 优先级，Firefox 可能直接忽略
最容易被忽略的是三者“完全一致”这个硬条件：href 差一个 v=1.2，type 写错 MIME，或者 crossorigin 少了属性名本身——任意一项出错，预加载就等于白写，字体仍会 FOIT。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
