前端 - 如何优化字体加载的性能？

Question

页面加载时，如何减少或避免字体加载时出现的 "闪烁" 或 "无样式内容"？

Answer 1

优化字体加载性能并减少或避免字体加载时出现的"闪烁"或"无样式内容"的问题，可以通过以下几种方法实现：

1. 使用字体预加载

通过HTML的<link>标签或CSS的@font-face结合font-display属性来预加载字体。font-display属性可以控制字体加载时的显示方式，以减少闪烁现象。

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap; /* 使用 swap 可以避免 FOUT（无样式文本闪现） */
}

font-display: swap; 的意思是，如果字体在有限的时间内（通常是3秒）没有加载完成，则浏览器会先显示后备字体（如果有的话），然后当字体加载完成后替换成指定的字体，从而避免闪烁。

2. 字体子集化

只包含网页实际使用的字符的字体文件（即字体子集化）可以显著减少字体文件的大小，从而加快加载速度。大多数现代字体托管服务（如 Google Fonts）都支持自动生成字体子集。

3. 使用 Web 字体服务

使用像 Google Fonts、Adobe Fonts 或 Typekit 这样的 Web 字体服务，它们通常会对字体进行优化，并提供多种格式的字体文件，以确保跨浏览器的兼容性。同时，这些服务也支持字体子集化和按需加载等功能。

4. 延迟加载非关键字体

对于非关键字体（即不影响页面主要内容的字体），可以考虑在页面加载完成后再加载这些字体，以减少对首屏加载时间的影响。可以使用JavaScript或CSS的媒体查询等技术来实现。

5. 缓存字体文件

确保字体文件被浏览器缓存，以便在用户重复访问网站时能够更快地加载。可以通过设置适当的HTTP缓存头部（如 Cache-Control）来实现。

6. 优化字体格式

选择最优的字体格式可以加快加载速度。通常，woff2 格式是最优选择，因为它在保持高质量的同时具有较小的文件大小。然而，为了确保最大的兼容性，可能还需要提供 woff 或其他格式的字体文件。

7. 监控和优化

使用性能分析工具（如 Google PageSpeed Insights、Lighthouse 等）来监控和分析字体加载的性能，并根据结果进行相应的优化。

通过实施上述策略，你可以有效地优化字体加载性能，并减少或避免字体加载时出现的"闪烁"或"无样式内容"的问题。