Web Font 会影响哪些性能指标？如何优化字体加载？

简化版

Web Font 会影响文本可见时间、LCP 和 CLS：字体晚到可能导致文本不可见、字体替换和布局偏移。优化包括使用 WOFF2、字体子集化、合理 font-display、预加载关键字体、选择尺寸接近的 fallback，并减少非关键字重和字符集。

详细版

字体性能不是只看字体文件大小。浏览器要下载字体、决定是否阻塞文本显示、在字体到达后替换 fallback；如果两套字体度量差异大，就可能造成换行和布局偏移。

首屏品牌大标题若是 LCP 元素，字体加载策略会直接影响 LCP。font-display: swap 能尽快显示 fallback，但可能带来替换抖动；optional 在弱网下可能放弃下载，更稳定但品牌字体出现概率低。

工程上要按页面关键性分层：关键字体少量 preload，非关键字重延后；中文字体尤其要子集化或避免整包下发。

完整版教学

一、字体影响的是“文字何时可见和是否稳定”

页面文本依赖 Web Font 时，浏览器要在“等字体”和“先用 fallback 显示”之间做选择。等太久会出现不可见文本，先显示又可能在字体到达后跳动。

字体可能影响 FCP、LCP 和 CLS。如果首屏最大内容是一个大标题，字体迟迟不可用或替换后重新布局，LCP 和视觉稳定性都会受影响。

记忆钩子：字体优化不是让字更漂亮，而是让文字“早点出现、换字不跳、少下载”。

二、font-display 决定文本显示策略

font-display 控制字体下载期间文本如何显示。不同取值影响不可见文本时间和替换行为。

值	行为倾向	适用场景
auto	浏览器默认	不推荐依赖默认
block	短暂隐藏等待字体	强品牌但有 FOIT 风险
swap	先 fallback，后替换	内容优先
fallback	短等，超时用 fallback	折中
optional	弱网可能放弃字体	性能稳定优先

例如正文内容通常更适合 swap 或 optional，因为可读性比品牌一致更重要。Logo 字体或品牌标题可更谨慎，但也要用数据验证。

三、字体体积要靠格式、子集和字重控制

WOFF2 通常比旧格式更适合 Web 传输。更关键的是减少字符集和字重。中文字体完整文件可能达到数 MB，直接用于首屏非常危险。

@font-face {
  font-family: "BrandTitle";
  src: url("/fonts/brand-title-subset.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+4E00-9FFF;
}

假设完整字体 4MB，首屏只需要 80 个常用字符，子集化后可能降到 80KB 级别。实际压缩率取决于字体结构，但方向很明确：不要为首屏下载整套字库。

四、关键字体可以 preload，但不能滥用

如果首屏 LCP 文本必须使用某个字体，可以用 preload 提前发现。字体请求经常在 CSS 解析后才发出，preload 能缩短发现延迟。

<link
  rel="preload"
  href="/fonts/brand-title.woff2"
  as="font"
  type="font/woff2"
  crossorigin
>

字体通常需要 crossorigin 与实际请求一致，否则可能重复下载。preload 只适合少量关键字体；如果把 6 个字重全部 preload，会抢占图片、CSS 和 JS 带宽，反而伤害 LCP。

五、fallback 字体度量会影响 CLS

字体替换时，如果 fallback 和目标字体字宽、行高差异大，文本可能换行，按钮宽度可能变化，正文高度也可能改变。CLS 优化要关注字体度量匹配。

问题	结果	处理
fallback 更窄	目标字体到达后换行	选择相近 fallback
行高变化	段落高度跳动	固定 line-height
按钮文字变宽	按钮挤压布局	预留宽度
多字重替换	多次变化	减少首屏字重

现代 CSS 可通过字体度量覆盖更细致地调 fallback，但工程上最常见的收益仍是选择相近字体、固定尺寸和减少替换次数。

六、字体策略要按页面和网络分层

不是所有页面都值得加载品牌字体。内容阅读页、后台系统、低端移动端可能更适合系统字体；品牌营销页可以加载少量关键字体，但要严格控制字重和字符集。

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

系统字体无需网络下载，渲染稳定，常用于性能优先产品。若必须用 Web Font，可以只给标题用，正文走系统字体，这样品牌感和性能更容易平衡。

七、常见误区与追问

误区：字体文件只影响下载，不影响布局。 字体替换会改变度量，可能造成换行和 CLS。
误区：所有字体都 preload 最好。 preload 会提高优先级，滥用会挤压真正关键资源。
误区：swap 一定完美。 swap 提高可见性，但目标字体到达后可能发生视觉跳动。
追问：为什么字体 preload 要加 crossorigin？ 字体请求通常按 CORS 处理，属性不一致可能导致重复请求。
追问：中文字体为什么更难优化？ 字符集巨大，完整字体体积常很大，需要子集化或系统字体策略。
追问：如何验证字体优化？ 看字体请求时机、文本可见时间、LCP 元素、CLS 来源和真实用户分群。

八、加强记忆

字体优化按“少、早、稳”记：少下载靠 WOFF2、子集、少字重；早出现靠合适 font-display 和少量关键 preload；稳定靠相近 fallback、固定 line-height 和尺寸预留。首屏文字是 LCP 时尤其要把字体放进性能链路分析。

简化版

详细版