必须设置as="font"，否则浏览器不按字体逻辑处理预加载；必须配合crossorigin（即使同源），否则字体被丢弃；type="font/woff2"推荐显式声明以避免mime探测失败。
link预加载字体必须设置 as="font"
不加这个属性，浏览器根本不会按字体逻辑处理预加载请求，哪怕 href 指向的是 .woff2 文件。它会被当成普通资源（比如 script 或 style）下载，不触发字体的跨域匿名请求模式，最终导致字体加载失败或被阻塞。
-
as="font"是强制项，缺了就失效，没有替代写法 - 必须配合
crossorigin属性（即使字体同源也建议加上），否则字体在多数浏览器中无法使用 -
type属性可选，但推荐显式写上，例如type="font/woff2"，有助于早期解析和 MIME 校验
为什么 crossorigin 不可省略
字体文件在加载时默认以匿名模式（crossorigin="anonymous"）发起请求；如果标签里没声明 crossorigin，浏览器会当作非 CORS 请求处理，导致字体被丢弃——尤其在使用 @font-face 的 font-display: swap 场景下，页面可能显示空白或回退字体。
- 只写
crossorigin（无值）等价于crossorigin="anonymous"，合法且常用 - 不要写
crossorigin="use-credentials"，字体不需要携带 Cookie，反而可能触发预检失败 - 本地开发时若用 file:// 协议，
crossorigin会导致加载失败，这是预期行为，需切到本地 server 测试
rel="preload" + as="font" 的典型写法
完整且安全的写法长这样：
<link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin>
注意几个硬性组合：
-
rel必须是"preload"，不能用"prefetch"或"preconnect" -
href路径必须准确指向字体文件，不能是 CSS 中@font-face的 URL 别名或相对路径别名 - 多个字体要分别写多个
link，不能在一个标签里逗号分隔
容易被忽略的兼容性细节
Chrome 73+、Firefox 71+、Safari 15.4+ 支持 as="font" 预加载，但 Safari 对 crossorigin 更敏感：如果字体响应头里缺少 Access-Control-Allow-Origin: *（或匹配源），即使写了 crossorigin 也会静默失败。
- 检查字体响应头是否含
Access-Control-Allow-Origin，CDN 或 Nginx 需额外配置 - Webpack/Vite 构建时，若字体被 hash 处理，
href必须同步更新，手写静态 link 容易过期 - 预加载的字体不会自动注入
@font-face，仍需在 CSS 中正确定义，否则只是白下一场
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
