必须在中添加，且href路径、crossorigin属性、as和type值须与@font-face完全一致，否则预加载失效。

怎么用 link rel="preload" 加载字体

直接在 里加一行就能让浏览器提前抓字体，不等 CSS 解析完才开始下载。关键不是“加了就行”，而是得配对 as="font" 和正确的 type，否则浏览器当普通资源处理，字体仍会阻塞渲染。

• rel="preload" 必须搭配 as="font"，漏掉 as 浏览器不会设字体专用请求头（比如 Accept: font/woff2）
• type 建议显式写上，比如 type="font/woff2"，避免某些旧版 Chrome 对未声明 type 的预加载字体降级为低优先级
• 字体 URL 路径必须和 @font-face 中的 src 完全一致（含查询参数），否则缓存不命中，等于白 preload
• 只对 display: swap 或 block 的字体有意义；auto 下浏览器可能跳过预加载

<link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin>

crossorigin 属性为什么不能省

字体是跨域资源，即使同站，现代浏览器也按 CORS 策略对待 @font-face 请求。没加 crossorigin，预加载会失败并退化成普通 GET，字体文件进不了字体缓存池，后续 @font-face 还得重下一遍。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 所有预加载字体都必须带 crossorigin，哪怕字体在同域名下
• 值可以是空字符串（crossorigin=""）或 crossorigin="anonymous"，效果一样；别用 "use-credentials"，字体不需要带 Cookie
• 如果字体服务不支持 CORS 响应头（比如返回缺失 Access-Control-Allow-Origin），预加载会静默失败，控制台可能只报一个 Font from origin 'xxx' has been blocked

和 @font-face 的 src 怎么对齐才不白忙

预加载只是“告诉浏览器快去下这个文件”，但最终是否用得上，取决于 CSS 里的 @font-face 是否真引用了它。路径、哈希、协议、大小写——差一点，就断链。

• 检查 @font-face 的 src 里第一个 url() 是否和 link 的 href 字符串完全相等（包括末尾斜杠、查询参数如 ?v=1.2）
• Webpack/Vite 构建后字体路径常带 hash，比如 inter.abc123.woff2，这时不能手写死 href，得靠构建插件注入真实路径
• HTTP/2 下多个字体可复用连接，但预加载仍建议只加最关键的 1–2 个（如正文主字体），加太多反而挤占其他关键资源带宽

Chrome DevTools 里怎么看预加载有没有生效

打开 Network 面板，筛选 font，看对应字体请求的 Initiator 列是不是 preload；再点开详情，确认 Timing 里的 Start Time 是否显著早于 CSS 解析完成时间。

• 如果 Initiator 是 stylesheet 或 other，说明预加载没触发，回去查 as、crossorigin、路径三要素
• 如果字体请求出现两次（一次 preload，一次 stylesheet），大概率是路径不一致或 crossorigin 缺失
• Waterfall 图里字体条没出现在最前面，可能是 preload 标签位置太靠后（比如放在 前），浏览器还没解析到就已开始布局

字体预加载真正卡住人的地方，往往不在语法，而在构建产物路径不可控、CDN 缓存策略干扰、或者误以为加了 preload 就自动解决 FOIT/FOUT——其实还得配好 font-display 和 fallback stack。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！