🖋️ 别让字体拖了后腿：FOIT/FOUT 深度解析与字体加载优化全攻略
前端性能优化专栏 - 第九篇
在网页设计中，字体往往被视为"灵魂"。它不仅关乎品牌识别 和视觉统一 ，更能直接影响界面的质感 与专业感。好的字体能降低用户的认知成本，传递出产品想要营造的独特氛围。
然而，字体作为一种静态资源，必须经过下载和管理。如果处理不当，它就会变成性能的"累赘"，甚至引发一些让用户抓狂的"怪现象"。
⚠️ 字体加载中的两大"怪现象"
你是否遇到过这样的场景：页面打开了，但文字部分是一片空白，过了好几秒才突然蹦出来？或者文字先是以一种普通的系统字体显示，然后突然"闪"一下，变成了精美的设计字体？
这可不是浏览器的 Bug，而是浏览器默认的字体加载策略在作祟。
1. FOIT：不可见文本闪现 (Flash of Invisible Text)
这是 Chrome 等现代浏览器的典型行为。当自定义字体还没下载完时，浏览器会选择完全不渲染文本。
- 用户体验：网速慢时，用户看到的是大片空白，甚至会误以为页面挂了。
- 本质：先保证样式统一，再显示内容。
- 优点：避免了字体闪变，视觉风格高度一致。
- 缺点：对弱网用户极其不友好，内容被阻塞。
2. FOUT：无样式文本闪现 (Flash of Unstyled Text)
这是 IE 等浏览器的传统行为。当自定义字体未加载完时，浏览器先用后备字体（系统自带字体）渲染。
- 用户体验：页面一开始就能阅读，但字体样式会明显"跳"一下。
- 本质：先保证内容可见，再追求样式正确。
- 优点：文字优先可见，对内容型页面（如博客、资讯）非常友好。
- 缺点：字体闪变会瞬间破坏设计感。
✨ 浏览器如何做权衡？
字体加载本质上是一个异步网络请求。在等待期间，浏览器必须决定：
- 是否渲染文本？
- 用什么字体渲染？
- 多久之后放弃等待？
为了不让浏览器"瞎猜"，我们需要一种方式显式地告诉它："在这个项目里，你应该如何平衡内容、样式和性能。"
🔧 终极武器：font-display
在 @font-face 中使用 font-display 属性，可以精准控制字体在不同加载阶段的渲染策略。
css
@font-face {
font-family: 'My Custom Font';
src: url(/fonts/my-font.woff2) format('woff2');
font-display: swap; /* 关键控制位 */
}
✅ 1. font-display: swap (强烈推荐)
这是目前最主流、最被推荐的策略。
- 行为：立即使用后备字体渲染，等自定义字体准备好后再替换。
- 特点 ：主动选择 FOUT，几乎没有文本阻塞时间。
- 适用场景：新闻站、博客、社区等以内容为主的页面。
🚫2. font-display: block
- 行为：设置约 3 秒的阻塞期。期间文本不可见（FOIT），超时后才回退到后备字体。
- 特点 ：偏向 FOIT，强调视觉一致性。
- 适用场景 ：品牌 Logo、视觉主标题等字体是核心识别部分的区域。切记不要对全站正文使用！
⚖️3. font-display: fallback
- 行为：设置极短的阻塞期（约 100ms）。如果字体没到，立即用后备字体，且通常不再替换。
- 特点 ：折中方案。快则用好字体，慢则全程用旧字体，不折腾，不闪变。
- 适用场景：希望有自定义字体，但不愿为此牺牲太多性能，也不希望看到闪变的场景。
⚡4. font-display: optional
- 行为：阻塞期极短，且赋予浏览器更大的决策权。网络差时可能直接不加载字体。
- 特点：性能优先级最高，字体属于"锦上添花"。
- 适用场景：装饰性字体、非核心模块的氛围字体。
💡 总结
字体优化不是简单的"全都要"，而是一场关于内容可见性 与视觉一致性的博弈。
- 如果你追求内容第一 ，请毫不犹豫地选择
swap。 - 如果你追求品牌至上 ，可以在局部使用
block。 - 如果你想要稳定体验 ，
fallback或optional是你的好伙伴。
合理利用 font-display，让你的网页在保持美感的同时，也能拥有丝滑的加载体验！
下一篇预告： 页面加载完了，但一滚动就发现元素在"乱跳"？这种让人头大的现象叫布局抖动（Layout Thrashing） 。下一篇我们将深入探讨如何识别并优化布局抖动，让你的页面稳如泰山！敬请期待！