web字体预加载标签放在对应样式表前后是否有加载速度优势？

开发者阿泽

2026-8-28

问题背景

我有一个fonts.css样式表，其中为四款web字体定义了@font-face规则，示例如下：

@font-face {
    font-family: 'example';
    src: url('/fonts/example-webfont.woff2') format('woff2'),
         url('/fonts/example-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    font-stretch: normal;
}

我希望字体能够尽快加载，最大程度减少FOUC（无样式内容闪烁）问题。目前我在页面的<head>标签内引入了该样式表：

<link rel="stylesheet" href="/fonts/fonts.css" />

核心疑问：从字体可用速度的角度出发，将字体预加载（preload）标签直接放在该样式表<link>标签之前或之后，是否存在加载优势？
两种放置方式示例如下：

方式一：预加载标签放在样式表之后

<link rel="stylesheet" href="/fonts/fonts.css" />
<link
  rel="preload"
  href="/fonts/examplebook-webfont.woff2"
  as="font"
  type="font/woff2"
  crossOrigin="anonymous"
/>
...

方式二：预加载标签放在样式表之前

<link
  rel="preload"
  href="/fonts/examplebook-webfont.woff2"
  as="font"
  type="font/woff2"
  crossOrigin="anonymous"
/>
...
<link rel="stylesheet" href="/fonts/fonts.css" />

补充说明：

当前站点使用HTTP/2协议

结论

将preload标签放在样式表标签之前有明确的加载速度优势，是推荐的写法，两种位置的实际加载效果差异来自浏览器的资源加载逻辑，和是否使用HTTP/2没有直接关系：

浏览器解析HTML是自上而下的顺序，预加载扫描器会按照标签出现的顺序识别需要提前拉取的资源。如果preload标签放在更靠前的位置，浏览器会立刻发起对应字体文件的高优先级请求，和fonts.css的请求并行传输，不需要等待fonts.css下载完成、解析出内部的@font-face规则后才发现需要加载字体，这中间省掉的是「CSS文件请求往返耗时+CSS规则解析耗时」，弱网环境下这段时间差可达数百毫秒，足够让字体提前完成加载，大幅降低FOUC出现的概率。
如果把preload标签放在样式表标签之后，浏览器会先发起fonts.css的请求，等解析到紧跟在后面的preload标签时，已经浪费了从开始解析head到CSS请求发出去这段可以并行拉取字体的时间窗口，preload的提前加载价值会被削弱。
即便是在HTTP/2多路复用的环境下，请求发起的时机依然直接决定资源加载完成的时间——更早发起的字体请求可以和CSS、其他head内核心资源共用连接并行传输，字体可用的时间点会明显早于后置preload的写法。

额外注意：同域名下的字体preload也必须带上crossorigin="anonymous"属性，否则浏览器会重复发起两次字体请求，反而拖慢加载速度；你当前在@font-face规则里配置的font-display: swap配合前置preload的写法，已经可以最大程度规避FOUC问题。

内容的提问来源于stack exchange，提问作者PBrown