字体优化对首屏渲染时间与可读性有重要影响。本文给出字体加载的最佳实践、预加载策略与 FOUC/FOIT 的处理方法。
加载策略
- 使用
font-display: swap或optional减少阻塞渲染；对首屏关键字体可预加载（<link rel="preload" as="font">）。 - 为不同语言或场景提供子集化字体以减小文件体积。
格式与 CDN
- 优先提供 WOFF2，兼容性缺失时回退到 WOFF/TTF。
- 使用 CDN 或边缘缓存以减小传输延迟，并结合
Cache-Control设置长期缓存。
Fallback 与可访问性
- 提供系统字体回退栈以保证在字体未加载时用户仍能阅读。
相关链接：