字体加载优化：font-display 策略与 FOIT/FOUT 处理

在网页性能优化中，字体加载是一个常被忽视但影响用户体验的重要环节。不当的字体加载策略会导致文本显示问题，如FOIT（Flash of Invisible Text）和FOUT（Flash of Unstyled Text）。本文将深入探讨如何利用font-display属性优化字体加载，并有效处理FOIT和FOUT问题。

理解FOIT与FOUT

FOIT（不可见文本闪烁）

FOIT是指浏览器在自定义字体加载完成前隐藏文本的现象。根据浏览器不同，隐藏时间可能持续3秒或更久，如果字体加载失败，最终会回退到系统字体。这会导致用户长时间面对空白内容，严重影响体验。

FOUT（无样式文本闪烁）

FOUT则是指浏览器先显示回退字体，待自定义字体加载完成后再切换。虽然用户能立即看到内容，但字体切换时的视觉跳跃也会造成不适。

font-display属性详解

CSS的font-display属性提供了控制字体加载行为的强大能力，它有五个可选值：

auto - 浏览器默认行为（通常等同于block）
block - 短时间（约3秒）隐藏文本，加载失败后使用回退字体
swap - 立即显示回退字体，加载完成后切换
fallback - 极短时间（约100ms）隐藏文本，然后使用回退字体，仅在短时间内（约3秒）加载完成才会切换
optional - 极短时间隐藏文本，然后使用回退字体，基本不会切换

实践建议

1. 针对关键内容使用swap

css 复制代码

@font-face {
  font-family: 'PrimaryFont';
  src: url('primary.woff2') format('woff2');
  font-display: swap;
}

对于标题等关键内容，使用swap确保用户立即看到文本，尽管会有字体切换。

2. 对正文考虑fallback

css 复制代码

@font-face {
  font-family: 'BodyFont';
  src: url('body.woff2') format('woff2');
  font-display: fallback;
}

对于大段正文，fallback能在快速加载时提供更好体验，同时避免长时间切换造成的布局偏移。

3. 对装饰性字体使用optional

css 复制代码

@font-face {
  font-family: 'DecorativeFont';
  src: url('decorative.woff2') format('woff2');
  font-display: optional;
}

装饰性字体不是必须的，使用optional可避免不必要的网络请求和布局变化。

进阶优化技巧

预加载关键字体：

html 复制代码

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

使用字体观察器API：

javascript 复制代码

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

优化字体文件：

仅包含需要的字符集和字重
使用WOFF2格式（比WOFF小30%）
考虑可变字体减少文件数量

测试与监控

使用以下工具评估字体加载性能：

Chrome DevTools的Performance面板
WebPageTest的影片视图
Lighthouse性能审计

结语

通过合理配置font-display属性和结合其他优化技术，开发者可以在字体美观性和加载性能间取得平衡。记住，没有放之四海皆准的方案，最佳策略应根据具体内容的重要性和用户体验目标来决定。持续测试不同场景下的字体加载行为，才能打造真正流畅的网页体验。