优化前端应用中的字体加载性能与闪避策略

1. 问题描述

字体加载是前端性能优化的关键环节。网页中的自定义字体（如通过 @font-face 引入的 WOFF/WOFF2 文件）通常需要从网络加载，如果处理不当会导致以下问题：

• 文本渲染延迟：浏览器在字体加载完成前可能不显示文本（FOIT，Flash of Invisible Text）或先显示回退字体再切换（FOUT，Flash of Unstyled Text）。
• 布局抖动：字体切换时文本尺寸变化，导致页面布局重新计算（重排）。
• 性能损耗：字体文件过大或未优化时，会增加首屏加载时间，影响 LCP（Largest Contentful Paint）。

2. 字体加载的浏览器默认行为

不同浏览器对字体加载的默认策略不同：

• FOIT（不可见文本闪烁）：现代浏览器（如 Chrome、Firefox）在字体加载期间会隐藏文本（最长约 3 秒），超时后显示回退字体，字体加载完成后再切换。
• FOUT（无样式文本闪烁）：旧版 IE 或某些场景下直接先显示回退字体，字体加载完成后替换。

这两种行为都可能损害用户体验：FOIT 导致内容延迟显示，FOUT 引发布局抖动。

3. 优化策略：字体闪避（Font Display）

通过 CSS 的 font-display 属性控制字体加载期间的渲染行为。其核心步骤如下：

步骤 1：定义 @font-face 时指定 font-display

@font-face {  
  font-family: 'CustomFont';  
  src: url('font.woff2') format('woff2');  
  font-display: swap; /* 关键属性 */  
}  

步骤 2：理解 font-display 的取值与行为

• auto：浏览器默认行为（通常为 FOIT）。
• block：短时间阻塞文本渲染（约 3 秒），超时后显示回退字体。
• swap：立即显示回退字体，字体加载完成后切换（避免 FOIT，但可能引发 FOUT）。
• fallback：阻塞文本渲染（约 0.1 秒），超时后显示回退字体，若字体在 3 秒内未加载完成则永久使用回退字体。
• optional：阻塞文本渲染（约 0.1 秒），若字体未就绪则永久使用回退字体（适合次要字体）。

推荐方案：对关键字体使用 swap，非关键字体使用 optional。

4. 进阶优化：预加载关键字体

为避免 FOUT 导致的布局抖动，可通过 <link rel="preload"> 提前加载字体：

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

注意：

• crossorigin 属性必须存在，因为字体是跨域资源（即使同域也建议设置）。
• 预加载需谨慎，仅用于首屏关键字体，避免浪费带宽。

5. 减少布局抖动的技术：尺寸匹配回退字体

通过 CSS 确保回退字体与目标字体的尺寸尽可能接近：

.font-custom {  
  font-family: 'CustomFont', fallback-font;  
  font-size: 16px;  
  line-height: 1.4;  
  /* 使用 font-metrics-overrides 调整回退字体对齐（实验性属性） */  
  font-metrics-overrides: {  
    ascent-override: 90%;  
    descent-override: 20%;  
    line-gap-override: 0%;  
  }  
}  

若浏览器不支持 font-metrics-overrides，可手动调整回退字体的 line-height 和 letter-spacing。

6. 动态加载与缓存策略

使用 FontFace API 控制字体加载时机：

const font = new FontFace('CustomFont', 'url(font.woff2)');  
document.fonts.add(font);  
font.load().then(() => {  
  document.body.classList.add('fonts-loaded');  
});  

结合 localStorage 或 Service Worker 缓存字体文件，避免重复请求。

7. 最终方案组合

1. 关键路径字体：预加载 + font-display: swap。
2. 非关键字体：异步加载 + font-display: optional。
3. 布局稳定性：使用尺寸匹配的回退字体，并通过 CSS 限制文本容器尺寸。
4. 监控与反馈：通过 font-display-period 等 API 监控字体加载时间，持续优化。

通过以上步骤，可显著提升字体加载性能，平衡内容可见性与布局稳定性。