as="font"是唯一能绑定@font-face的取值，因浏览器仅为此值触发专用FontLoader流程；其他as值使资源进入普通缓存池，无法被字体引擎识别，导致重复下载和FOIT。
as 属性不是可选的装饰，它是浏览器决定“怎么加载、用什么策略加载、加载完能不能复用”的开关。对字体文件来说，漏写或写错 as，rel="preload" 就等于没写。
为什么 as="font" 是唯一能绑定到 @font-face 的取值
浏览器为字体维护了一套独立加载流程（FontLoader），只有 as="font" 才会触发它。其他值比如 as="fetch" 或 as="script" 会让资源进普通 HTTP 缓存池，后续 @font-face 即使 URL 完全一致，也认不出这是个字体——结果就是重复下载，FOIT 照旧。
-
as="font"→ 自动加Accept: font/woff2,*/*，校验服务端返回的Content-Type，启用 CORS 检查和高优先级调度 -
as="fetch"→ 发Accept: */*，哪怕响应头是font/woff2，字体引擎也跳过不处理 -
as="style"或as="script"→ 请求走对应缓存分区，@font-face根本不会去那里找
as="font" 必须配 crossorigin，哪怕同源
字体加载强制要求 CORS 上下文，浏览器不会“自动降级”。漏掉 crossorigin，即使字体和 HTML 同域，已下载的数据也会被丢弃，@font-face 会重新发起一次带 CORS 头的请求——你看到 Network 里有两个请求，但控制台无报错，只表现为文字空白。
- ✅ 正确写法：
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>（crossorigin无等号无值） - ❌ 无效写法：
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2">（漏crossorigin） - ⚠️ 风险写法：
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin="anonymous">（非必要，部分 CDN 可能因头校验严格而拒绝）
路径必须字符串完全一致，连查询参数都不能差
浏览器判断预加载资源能否被 @font-face 复用，靠的是 URL 字符串完全相等，不是语义匹配。构建工具自动注入哈希或版本号时，极易踩坑。
立即学习“前端免费学习笔记（深入）”；
- 如果
@font-face中写的是url('/fonts/inter.woff2?v=2.1')，但<link>的href是/fonts/inter.woff2，就不会复用 - 大小写、末尾斜杠、协议（
http://vshttps://）、域名（www.example.comvsexample.com）任意一处不同，都算两个资源 - 即使服务端做了 301 重定向，浏览器也不认为它们是同一个 URL
最容易被忽略的其实是三件事：一是 as 值写错或漏写，二是 crossorigin 没显式声明，三是构建后路径哈希没同步到 <link> 的 href 里。这三处任一出问题，预加载就失效，且很难从 DevTools 直观看出原因。
