必须带as="font"和type才能正确进入字体加载流水线，否则会被误判类型或拒绝复用；跨域字体必须加crossorigin，且href需与@font-face中src完全一致，配合font-display: swap可避免闪动。
直接用 <link rel="preload"> 加载字体最可靠，比 @font-face 里加 font-display: optional 更早触发下载，但必须配对使用 as="font" 和 type，否则浏览器可能忽略或重复加载。
为什么 <link rel="preload"> 必须带 as="font" 和 type
浏览器只在明确知道预加载资源类型时，才会将其加入字体加载流水线。漏掉 as="font"，它会被当普通脚本或样式处理，不进字体缓存；没写 type（如 type="font/woff2"），某些版本 Chrome 会拒绝复用该资源，导致同一字体被下载两次。
常见错误现象：Network 面板里看到字体请求出现两次，一次是 preload（Status 200），一次是 @font-face 实际使用时（Status 200 from disk cache 或甚至又是一次网络请求）。
-
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>✅ -
<link rel="preload" href="/fonts/inter.woff2" as="font">❌（缺少type，Safari 可能跳过） -
<link rel="preload" href="/fonts/inter.woff2" as="style">❌（类型错，不会进字体加载队列）
crossorigin 属性不是可选的，而是字体跨域时强制要加
只要字体文件不在当前域名下（包括子域不同、协议不同、端口不同），就必须加 crossorigin，否则浏览器会因 CORS 策略静默丢弃预加载结果——即使 Network 显示请求成功，@font-face 仍会重新发起带 Origin 头的请求。
使用场景：字体托管在 CDN（如 https://cdn.example.com/fonts/），或用 Webpack 构建后字体路径被转为 public CDN 地址。
- 同源字体（如
/fonts/roboto.woff2）：可不加crossorigin，但加上也无害 - 跨域字体（如
https://fonts.example-cdn.com/roboto.woff2）：必须加crossorigin，且服务端需返回Access-Control-Allow-Origin: *或对应源 -
crossorigin="anonymous"和crossorigin效果相同，后者是简写，推荐用后者
和 @font-face 的 font-display 怎么配合才不冲突
preload 只管“尽早下载”，不控制渲染行为；font-display 才决定字体加载期间文本怎么显示。两者必须协同，否则容易出现闪动（FOIT → FOUT）或文字长时间不可见。
推荐组合：
-
font-display: swap+preload：最常用。字体未就绪时先用备用字体，就绪后立即替换，用户感知最平滑 -
font-display: optional+preload：不推荐。浏览器可能因性能判断直接跳过加载，preload就白做了 -
font-display: block+preload：慎用。虽能避免 FOUT，但若预加载失败或延迟，页面文字会空白更久
关键点：预加载的 href 必须和 @font-face 中 src 指向**完全一致的 URL**（含查询参数），否则浏览器无法匹配复用。
字体预加载真正起效的前提，是 HTML 在早期就发出请求——把它放在 靠前位置，不要等 JS 或 CSS 后再动态插入；另外，WOFF2 格式优先，别让预加载指向已淘汰的 WOFF 或 TTF。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
