HTML怎么做预加载字体_html preload字体预加载做法【实战】

时间：2026-08-03 09:25:48 编辑：袖梨来源：一聚教程网

HTML怎么做预加载字体_html preload字体预加载做法【实战】需要先看清适用场景和关键步骤，避免只记结论却忽略实际限制。

<link rel="preload">必须带as="font"和type才能正确进入字体加载流水线，否则会被误判类型或拒绝复用；跨域字体必须加crossorigin，且href需与@font-face中src完全一致，配合font-display: swap可避免闪动。

直接用 <link rel="preload"> 加载字体最可靠，比 @font-face 里加 font-display: optional 更早触发下载，但必须配对使用 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，否则浏览器会因 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 效果相同，后者是简写，推荐用后者

preload 只管“尽早下载”，不控制渲染行为；font-display 才决定字体加载期间文本怎么显示。两者必须协同，否则容易出现闪动（FOIT → FOUT）或文字长时间不可见。

推荐组合：

关键点：预加载的 href 必须和 @font-face 中 src 指向完全一致的 URL（含查询参数），否则浏览器无法匹配复用。

字体预加载真正起效的前提，是 HTML 在早期就发出请求——把它放在 <head> 靠前位置，不要等 JS 或 CSS 后再动态插入；另外，WOFF2 格式优先，别让预加载指向已淘汰的 WOFF 或 TTF。