如何避免由 Web 字体引起的布局偏移( 四 )

总结总之,如果浏览器没有及时获取网络字体,并且可以应用font-display: optional到网络字体,让浏览器以备用系统字体呈现来防止布局偏移,否则的话就只能优化我们的字体以尝试在浏览器需要它们之前将它们获取到浏览器:

  • 使用woff2最小化文件大小
  • 优化字体文件
  • 加载更少的字体
  • 预加载关键字体
  • 在CDN上托管字体文件
  • 使用 f-mods 减少字体交换的影响


经验总结扩展阅读