别让 Web 字体拖垮你的网站：字体性能优化完全指南

Web 字体是页面渲染链路上的”隐形杀手”：一个 300KB 的 WOFF2 文件可以让首屏文字空白 1 秒以上，一个未做子集化的中文字体甚至能吞掉数 MB 带宽。本文从加载机制讲起，拆解 7 个最常见的字体性能陷阱，并给出一套可直接落地的优化方案——WOFF2 + 子集化 + font-display: swap + 度量覆盖 + 预加载 + 强缓存，最后附上完整的监控方案与检查清单。

一、Web 字体为什么会拖慢网站

1.1 一条容易被忽视的渲染阻塞链

很多开发者以为字体只是”异步加载的资源”，实际上它与页面渲染的关系远比想象中紧密：

HTML 解析
  └─> 遇到 <link rel="stylesheet"> ──> CSS 下载（渲染阻塞）
        └─> CSSOM 构建完成后，浏览器才知道 @font-face 规则
              └─> 页面文本布局时发现需要该字体 ──> 此时才真正发起字体请求
                    └─> 字体下载完成前，文字区域可能空白（FOIT）
                          └─> 或先显示回退字体，加载后闪变（FOUT / CLS）

HTML 解析
  └─> 遇到 <link rel="stylesheet"> ──> CSS 下载（渲染阻塞）
        └─> CSSOM 构建完成后，浏览器才知道 @font-face 规则
              └─> 页面文本布局时发现需要该字体 ──> 此时才真正发起字体请求
                    └─> 字体下载完成前，文字区域可能空白（FOIT）
                          └─> 或先显示回退字体，加载后闪变（FOUT / CLS）

关键结论有两个：

字体请求通常”被发现得很晚”——它依赖于 CSS 下载、解析和布局触发，而不是 HTML 一到就下载；
font-display: block / auto 期间文本不可见，直接推迟可交互观感，甚至推迟 LCP（当最大内容元素是文本时）。

1.2 字体对 Core Web Vitals 的影响

指标	影响方式	典型症状
LCP（最大内容绘制）	文本作为 LCP 元素时，阻塞期会让文字迟迟不出现	首屏大标题白屏 1–3 秒
CLS（累积布局偏移）	回退字体与 Web 字体的宽度、行高度量不一致	字体加载瞬间页面”跳动”
INP（交互到下一次绘制）	字体解析、应用的开销发生在主线程	弱网/低端设备上交互卡顿
带宽与流量	字体文件体积普遍在 50–400KB，中文字体可达数 MB	移动端流量浪费、弱网超时

1.3 一个直观的数量级对比

资源类型	典型体积	说明
单个英文 WOFF2 字重	15–50KB	相对可控
一套英文家族（4 个字重）	60–200KB	乘以字重数
完整中文字体（单字重）	5–20MB	包含数万汉字字形
子集化后的中文 Web 字体	50KB–1MB	按需切片后

⚠️ 注意：中文字体是字体性能问题的”重灾区”。GB2312 常用字约 6763 个，而商业字体往往包含 2 万+ 字形，不子集化直接上线是灾难性的。

二、七个最常见的字体性能陷阱

陷阱 1：直接把完整字体丢上线

最常见的错误：设计师交付一个 10MB 的 TTF，前端转手放进项目。

症状：Network 面板里字体请求体积巨大、耗时数秒；
根因：未做格式压缩与子集化，页面实际只用了其中几百个字符。

陷阱 2：加载过多的字重与字体家族

/* ❌ 反面示例：一次声明 8 个字重 */
@import url("...css?family=Open+Sans:300,400,500,600,700,800|Roboto:400,700");

/* ❌ 反面示例：一次声明 8 个字重 */
@import url("...css?family=Open+Sans:300,400,500,600,700,800|Roboto:400,700");

每个字重都是独立文件、独立请求；
绝大多数页面实际只用到 2–3 个字重；
建议：Regular（400）+ Bold（700）起步，按真实使用增补。

陷阱 3：默认的 `font-display: auto` 引发 FOIT

浏览器的默认行为是”不可见闪烁”（Flash of Invisible Text）：阻塞期内文字区域完全空白，最长约 3 秒。用户看到的是：页面框架出来了，唯独文字消失。

陷阱 4：缺少 Preload，字体请求”迟到”

字体请求要等 CSS 下载 + 解析 + 布局之后才发出，串行链路白白浪费几百毫秒：

DNS ─> TCP ─> TLS ─> HTML ─> CSS ─> 字体
                          ↑
                 这里才开始发现字体

DNS ─> TCP ─> TLS ─> HTML ─> CSS ─> 字体
                          ↑
                 这里才开始发现字体

陷阱 5：强依赖第三方字体服务

以 Google Fonts 为例的问题：

额外的 DNS 查询 + TCP + TLS 握手（对 fonts.googleapis.com 和 fonts.gstatic.com 两个域）；
在部分网络环境下可达性差、延迟高；
无法完全掌控缓存策略与版本。

陷阱 6：回退字体度量不一致导致 CLS

Web 字体加载完成后替换回退字体的瞬间，如果两者的字宽（advance width）、上伸部（ascent）、下伸部（descent）、行高不一致，文本会横向变宽/变窄、行高跳动，引发布局偏移。

陷阱 7：滥用图标字体（Icon Font）

整包图标常常只用到几个，却要加载全部字形；
FOIT 期间图标位置显示空白方块或”豆腐块”；
可访问性差（屏幕阅读器读到奇怪字符）。
现代替代方案：内联 SVG（可用 <symbol> + <use> 复用）或 SVG Sprite。

三、font-display 完全指南

font-display 决定了字体下载期间和失败后的文本显示策略，是字体优化的第一开关。它把时间轴划分为阻塞期（文本不可见，用回退字体的”隐形”版本占位）和交换期（用回退字体显示，字体到达后替换）。

值	阻塞期	交换期	文本表现	适用场景
`auto`	≈3s	无限	先空白后闪现	默认值，不推荐
`block`	自定义（传统约 3s）	无限	同上，时间可调	极少数必须等字体的场景
`swap`	0ms	无限	立即显示回退字体，到达后替换	大多数正文场景 ✅
`fallback`	≈100ms	≈3s	短暂等待后显示回退，3 秒内到达才替换	首屏关键文本 ✅
`optional`	≈100ms	0ms	基本只看回退字体，浏览器可自行决定	非关键装饰性文本 ✅

选择建议（一句话版）：

正文/标题 → swap 或 fallback；装饰性文字 → optional；几乎永远不用 auto/block

正文/标题 → swap 或 fallback；装饰性文字 → optional；几乎永远不用 auto/block

💡 经验法则：对 LCP 元素使用 fallback 或 optional，把”字体闪变”控制在用户无感知的范围；对普通正文使用 swap 保证内容可读性优先。

四、核心优化策略

4.1 格式：只发 WOFF2

WOFF2 基于 Brotli 压缩，比 TTF 小约 50%，比 WOFF 小约 30%；
所有现代浏览器（Chrome 36+、Firefox 39+、Safari 12+、Edge 14+）均已支持；
旧格式（EOT/TTF/SVG）作为兼容源反而会增加下载量，除非确有需求，一律省略。

/* ✅ 只提供 WOFF2 */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ✅ 只提供 WOFF2 */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

4.2 子集化：只打包页面真正用到的字符

方案 A：按 Unicode 范围手动子集（适合英文/符号）

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+2000-206F;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+2000-206F;
}

浏览器只下载当前页面命中的分片。

方案 B：工具链自动子集（中文必备）

# fonttools（Google 官方 Python 工具）
pip install fonttools brotli

# 子集化：只保留常用汉字 + ASCII，输出 WOFF2
pyftsubset SourceHanSansSC-Regular.otf \
  --output-file=han-sans-sub.woff2 \
  --flavor=woff2 \
  --unicodes="U+0020-007E,U+4E00-9FFF,U+3000-303F" \
  --layout-features="*"

# fonttools（Google 官方 Python 工具）
pip install fonttools brotli

# 子集化：只保留常用汉字 + ASCII，输出 WOFF2
pyftsubset SourceHanSansSC-Regular.otf \
  --output-file=han-sans-sub.woff2 \
  --flavor=woff2 \
  --unicodes="U+0020-007E,U+4E00-9FFF,U+3000-303F" \
  --layout-features="*"

中文场景更推荐自动按频分片的成熟方案：

工具	特点
cn-font-split	按字频 + unicode-range 自动切分为上百个小分片，按需加载
font-spider（字蛛）	扫描 HTML/CSS 中实际出现的字符，生成极小子集
Google Fonts 中文服务	服务端自动分片，浏览器按 `unicode-range` 命中下载

💡 效果对比：一个 8MB 的完整中文字体，经分片后首屏通常只需下载 100–300KB 命中的分片。

4.3 加载时机：Preload + font-display 组合拳

对首屏关键字体（如 LCP 标题字体）提前抢占带宽：

<head>
  <!-- ✅ 尽早建立与字体 CDN 的连接（跨域时必加） -->
  <link rel="preconnect" href="https://cdn.example.com" crossorigin>

  <!-- ✅ 预加载首屏关键字体（注意 crossorigin 即使同域也要加） -->
  <link rel="preload"
        href="/fonts/inter-700.woff2"
        as="font"
        type="font/woff2"
        crossorigin>
</head>

<head>
  <!-- ✅ 尽早建立与字体 CDN 的连接（跨域时必加） -->
  <link rel="preconnect" href="https://cdn.example.com" crossorigin>

  <!-- ✅ 预加载首屏关键字体（注意 crossorigin 即使同域也要加） -->
  <link rel="preload"
        href="/fonts/inter-700.woff2"
        as="font"
        type="font/woff2"
        crossorigin>
</head>

注意：

crossorigin 属性即使同源也必须加，否则字体会被二次下载（字体请求天然携带 CORS 模式）；
只 preload 1–2 个真正关键的字重，preload 滥用会挤占其他关键资源带宽。

4.4 度量覆盖：用 size-adjust 消除 CLS

现代 CSS 提供了字体度量覆盖描述符，让回退字体”伪装”成 Web 字体的尺寸，几乎消除字体交换瞬间的高度/宽度跳变：

/* 用本地 Arial 生成一个"度量兼容"的回退字体 */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 105.03%;      /* 缩放匹配字宽 */
  ascent-override: 96.35%;   /* 匹配上伸部 */
  descent-override: 24.09%;  /* 匹配下伸部 */
  line-gap-override: 0%;
}

body {
  /* 回退字体放在栈里，Web 字体加载前使用 */
  font-family: "Inter", "Inter Fallback", system-ui, sans-serif;
}

/* 用本地 Arial 生成一个"度量兼容"的回退字体 */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 105.03%;      /* 缩放匹配字宽 */
  ascent-override: 96.35%;   /* 匹配上伸部 */
  descent-override: 24.09%;  /* 匹配下伸部 */
  line-gap-override: 0%;
}

body {
  /* 回退字体放在栈里，Web 字体加载前使用 */
  font-family: "Inter", "Inter Fallback", system-ui, sans-serif;
}

💡 各参数值可通过 Fontaine、Next.js 的 next/font（内置自动 fallback 生成）或 Fontaine Playground 等工具自动计算，无需手工调试。

4.5 自托管 vs 第三方服务

维度	自托管	第三方字体服务
额外 DNS/TLS 握手	无（同域或自有 CDN）	有（跨域）
缓存控制	完全掌控（可 `immutable`）	受服务商策略限制
分片能力	需自行构建（cn-font-split 等）	通常内置
隐私与合规	数据不出域	存在第三方请求
维护成本	需自己更新字体文件	自动跟随服务端

建议：生产环境优先自托管 + 自有 CDN；确实使用第三方服务时，务必加 preconnect 并评估目标用户的网络可达性（例如国内环境访问 Google Fonts 需要镜像或替代方案）。

4.6 缓存：让字体”一次下载，终身使用”

字体文件内容不随业务变化，配合内容哈希文件名可以放心设置超长缓存：

# Nginx 配置示例
location /fonts/ {
  add_header Cache-Control "public, max-age=31536000, immutable";
  add_header Access-Control-Allow-Origin "*";  # 跨域字体必需
}

# Nginx 配置示例
location /fonts/ {
  add_header Cache-Control "public, max-age=31536000, immutable";
  add_header Access-Control-Allow-Origin "*";  # 跨域字体必需
}

要点：

文件名带哈希（inter-400.a1b2c3.woff2），更新字体 = 更新文件名；
immutable 告诉浏览器无需发协商请求（304）验证；
字体是 CORS 资源，跨域部署必须返回正确的 Access-Control-Allow-Origin。

4.7 可变字体（Variable Fonts）：一个文件覆盖所有字重

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;  /* 声明轴范围 */
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;  /* 声明轴范围 */
  font-display: swap;
}

优势：单文件覆盖 100–900 全部字重，比加载 5 个静态字重更省；
权衡：单文件比单个静态字重大；中文可变字体体积惊人，英文/界面字体适合，中文慎用（或与子集化结合）。

4.8 兜底策略：系统字体栈

任何字体优化都比不过”不加载字体”。对性能敏感的页面（如工具站、文档站），系统字体栈是零成本方案：

font-family: system-ui, -apple-system, "Segoe UI", Roboto,
             "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
             sans-serif;

font-family: system-ui, -apple-system, "Segoe UI", Roboto,
             "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
             sans-serif;

进阶玩法：首屏用系统字体保证 LCP，空闲时预取 Web 字体，二次导航再切换使用。

五、实战：完整的最佳实践示例

把上述策略组合成一个可直接抄作业的模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">

  <!-- 1. 提前建立连接 -->
  <link rel="preconnect" href="https://fonts.example.com" crossorigin>

  <!-- 2. 预加载首屏关键字体（标题字重） -->
  <link rel="preload" href="https://fonts.example.com/han-sans-700.woff2"
        as="font" type="font/woff2" crossorigin>
</head>
<body>
  <style>
    /* 3. 度量兼容的回退字体，消除 CLS */
    @font-face {
      font-family: "Han Sans Fallback";
      src: local("PingFang SC"), local("Microsoft YaHei");
      size-adjust: 102%;
      ascent-override: 92%;
      descent-override: 24%;
      line-gap-override: 0%;
    }

    /* 4. 正式字体：WOFF2 + font-display + unicode-range 分片 */
    @font-face {
      font-family: "Han Sans";
      src: url("https://fonts.example.com/han-sans-700.woff2") format("woff2");
      font-weight: 700;
      font-display: swap;          /* 5. 内容可读性优先 */
    }

    body {
      font-family: "Han Sans", "Han Sans Fallback",
                   system-ui, sans-serif;
    }
  </style>

  <script>
    // 6. 可选：用 Font Loading API 监控字体就绪，做精细化控制
    if ("fonts" in document) {
      Promise.all([
        document.fonts.load('700 1em "Han Sans"'),
      ]).then(([font]) => {
        document.documentElement.classList.add("fonts-ready");
      });
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">

  <!-- 1. 提前建立连接 -->
  <link rel="preconnect" href="https://fonts.example.com" crossorigin>

  <!-- 2. 预加载首屏关键字体（标题字重） -->
  <link rel="preload" href="https://fonts.example.com/han-sans-700.woff2"
        as="font" type="font/woff2" crossorigin>
</head>
<body>
  <style>
    /* 3. 度量兼容的回退字体，消除 CLS */
    @font-face {
      font-family: "Han Sans Fallback";
      src: local("PingFang SC"), local("Microsoft YaHei");
      size-adjust: 102%;
      ascent-override: 92%;
      descent-override: 24%;
      line-gap-override: 0%;
    }

    /* 4. 正式字体：WOFF2 + font-display + unicode-range 分片 */
    @font-face {
      font-family: "Han Sans";
      src: url("https://fonts.example.com/han-sans-700.woff2") format("woff2");
      font-weight: 700;
      font-display: swap;          /* 5. 内容可读性优先 */
    }

    body {
      font-family: "Han Sans", "Han Sans Fallback",
                   system-ui, sans-serif;
    }
  </style>

  <script>
    // 6. 可选：用 Font Loading API 监控字体就绪，做精细化控制
    if ("fonts" in document) {
      Promise.all([
        document.fonts.load('700 1em "Han Sans"'),
      ]).then(([font]) => {
        document.documentElement.classList.add("fonts-ready");
      });
    }
  </script>
</body>
</html>

对应的服务端配置（Nginx）：

location /fonts/ {
  add_header Cache-Control "public, max-age=31536000, immutable";
  add_header Access-Control-Allow-Origin "*";
  gzip_static on;   # WOFF2 本身已压缩，无需再开 gzip
}

location /fonts/ {
  add_header Cache-Control "public, max-age=31536000, immutable";
  add_header Access-Control-Allow-Origin "*";
  gzip_static on;   # WOFF2 本身已压缩，无需再开 gzip
}

⚠️ 细节：WOFF2 已是压缩格式，对它再启用 gzip/brotli 纯属浪费 CPU，请在压缩规则中排除 .woff2。

6.1 实验室工具

工具	用途
Chrome DevTools → Network	按类型筛选 Font，查看体积、耗时、是否阻塞渲染
Lighthouse	审计 “Ensure text remains visible during webfont load”、”Preload key requests” 等专项
WebPageTest	瀑布流分析字体请求的发现时机与阻塞链

6.2 线上真实用户监控（RUM）

用 PerformanceObserver 采集字体加载耗时与布局偏移：

// 监控资源加载（含字体）
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.initiatorType === "css" || entry.name.endsWith(".woff2")) {
      console.log(`[font] ${entry.name} ${(entry.duration / 1000).toFixed(2)}s`);
    }
  }
}).observe({ type: "resource", buffered: true });

// 监控布局偏移，定位字体交换引起的 CLS
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log(`[cls] +${entry.value.toFixed(4)}`, entry.sources);
    }
  }
}).observe({ type: "layout-shift", buffered: true });

// 监控资源加载（含字体）
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.initiatorType === "css" || entry.name.endsWith(".woff2")) {
      console.log(`[font] ${entry.name} ${(entry.duration / 1000).toFixed(2)}s`);
    }
  }
}).observe({ type: "resource", buffered: true });

// 监控布局偏移，定位字体交换引起的 CLS
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log(`[cls] +${entry.value.toFixed(4)}`, entry.sources);
    }
  }
}).observe({ type: "layout-shift", buffered: true });

6.3 快速自检三问

Network 面板里字体请求是否发生在 CSS 之后很久？→ 缺 preload；
字体体积是否 > 100KB（英文）/ > 300KB（中文单分片）？→ 缺子集化；
弱网模拟（Slow 3G）下首屏文字是否空白超过 100ms？→ font-display 配置有问题。

七、优化检查清单

只交付 WOFF2 格式，移除 EOT/TTF/SVG 冗余源
英文按 unicode-range 分片；中文使用 cn-font-split / font-spider 等自动子集
字重控制在 2–3 个，删除未使用的字重
所有 @font-face 显式声明 font-display: swap | fallback | optional
首屏关键字体添加 <link rel="preload" as="font" crossorigin>
跨域字体源添加 preconnect
配置度量覆盖（size-adjust / ascent-override 等）或使用 next/font 自动生成回退
文件名内容哈希 + Cache-Control: max-age=31536000, immutable
跨域部署返回正确的 CORS 响应头
压缩规则中排除 .woff2
图标优先使用内联 SVG 而非图标字体
Lighthouse 字体相关审计全部通过，RUM 持续监控 CLS 与资源耗时

八、总结

Web 字体的性能问题本质上是**”必要的美学”与”有限的带宽”之间的博弈**。化解之道并不复杂，记住这条优先级链：

不加载（系统字体） > 少加载（子集化、少字重） > 快加载（WOFF2、preload、缓存） > 优雅降级（font-display、度量覆盖）

不加载（系统字体） > 少加载（子集化、少字重） > 快加载（WOFF2、preload、缓存） > 优雅降级（font-display、度量覆盖）

先做减法（砍格式、砍字重、砍未用字符），再做优化（压缩、预加载、缓存），最后做兜底（回退字体栈 + 度量覆盖）。把这条链路走完，字体就不再是性能陷阱，而是可以在任何网络上稳定交付的”设计资产”。

别让 Web 字体拖垮你的网站：一份全面的字体性能优化指南

一、Web 字体为什么会拖慢网站

1.1 一条容易被忽视的渲染阻塞链

1.2 字体对 Core Web Vitals 的影响

1.3 一个直观的数量级对比

二、七个最常见的字体性能陷阱

陷阱 1：直接把完整字体丢上线

陷阱 2：加载过多的字重与字体家族

陷阱 3：默认的 `font-display: auto` 引发 FOIT

陷阱 4：缺少 Preload，字体请求”迟到”

陷阱 5：强依赖第三方字体服务

陷阱 6：回退字体度量不一致导致 CLS

陷阱 7：滥用图标字体（Icon Font）

三、font-display 完全指南

四、核心优化策略

4.1 格式：只发 WOFF2

4.2 子集化：只打包页面真正用到的字符

方案 A：按 Unicode 范围手动子集（适合英文/符号）

方案 B：工具链自动子集（中文必备）

4.3 加载时机：Preload + font-display 组合拳

4.4 度量覆盖：用 size-adjust 消除 CLS

4.5 自托管 vs 第三方服务

4.6 缓存：让字体”一次下载，终身使用”

4.7 可变字体（Variable Fonts）：一个文件覆盖所有字重

4.8 兜底策略：系统字体栈

五、实战：完整的最佳实践示例

6.1 实验室工具

6.2 线上真实用户监控（RUM）

6.3 快速自检三问

七、优化检查清单

八、总结

相关文章

别让 Web 字体拖垮你的网站：一份全面的字体性能优化指南

一、Web 字体为什么会拖慢网站

1.1 一条容易被忽视的渲染阻塞链

1.2 字体对 Core Web Vitals 的影响

1.3 一个直观的数量级对比

二、七个最常见的字体性能陷阱

陷阱 1：直接把完整字体丢上线

陷阱 2：加载过多的字重与字体家族

陷阱 3：默认的 font-display: auto 引发 FOIT

陷阱 4：缺少 Preload，字体请求”迟到”

陷阱 5：强依赖第三方字体服务

陷阱 6：回退字体度量不一致导致 CLS

陷阱 7：滥用图标字体（Icon Font）

三、font-display 完全指南

四、核心优化策略

4.1 格式：只发 WOFF2

4.2 子集化：只打包页面真正用到的字符

方案 A：按 Unicode 范围手动子集（适合英文/符号）

方案 B：工具链自动子集（中文必备）

4.3 加载时机：Preload + font-display 组合拳

4.4 度量覆盖：用 size-adjust 消除 CLS

4.5 自托管 vs 第三方服务

4.6 缓存：让字体”一次下载，终身使用”

4.7 可变字体（Variable Fonts）：一个文件覆盖所有字重

4.8 兜底策略：系统字体栈

五、实战：完整的最佳实践示例

6.1 实验室工具

6.2 线上真实用户监控（RUM）

6.3 快速自检三问

七、优化检查清单

八、总结

相关文章

陷阱 3：默认的 `font-display: auto` 引发 FOIT