Web 字体加载策略演示 - FOIT/FOUT 对比

FOIT (Flash of Invisible Text)：在自定义Web字体加载完成之前，浏览器完全隐藏文字，导致用户看到一片空白区域。通常持续数秒，严重影响用户体验和SEO。

FOUT (Flash of Unstyled Text)：浏览器立即使用系统默认字体（回退字体）显示文字，待自定义字体加载完成后再平滑切换。文字始终可见，用户体验更好。

核心区别：FOIT让文字不可见，FOUT让文字始终可见但样式可能变化。

• auto：浏览器默认行为（通常等同于block）
• block：短阻塞期后无限切换期，导致FOIT
• swap：零阻塞期，无限切换期，导致FOUT
• fallback：极短阻塞(~100ms)后有限切换期(~3s)
• optional：极短阻塞(~100ms)后不切换，性能最优

推荐：大多数网站使用 swap 或 fallback，在用户体验和品牌一致性之间取得平衡。

Web字体通常需要额外的HTTP请求，且文件体积较大（中文字体可达数MB）。字体加载会直接影响：

LCP (Largest Contentful Paint)：如果使用FOIT策略，文字在加载期间不可见，会延迟最大内容渲染时间。
CLS (Cumulative Layout Shift)：如果回退字体与自定义字体度量差异大，切换时会导致布局偏移。可通过 size-adjust、ascent-override 等CSS属性缓解。

使用 font-display: optional 或 fallback 可有效改善Core Web Vitals指标。

中文字体文件通常很大（4-15MB），优化建议：
1. 使用 字体子集化（仅包含所需字符）
2. 使用 unicode-range 按需加载不同字符集
3. 优先使用 font-display: swap 确保文字立即可见
4. 利用 CDN 加速字体文件分发
5. 预加载关键字体：<link rel="preload" as="font">
6. 对于正文内容，考虑使用系统字体栈作为首选

是的，有显著影响。

Google的爬虫会考虑页面加载体验。FOIT导致的长时间空白可能被解读为页面加载缓慢或内容缺失。此外，如果爬虫在字体加载超时前抓取页面，可能无法正确索引隐藏的文字内容。

使用 font-display: swap 可确保搜索引擎始终能看到文字内容，对SEO更友好。Google的Page Experience更新也将视觉稳定性纳入排名因素。