字体的使用在大多数网页中都很普遍，而且经常会出现错误。许多错误都会对网页性能预算产生负面影响。本文旨在提供有关网页字体使用的信息，并帮助您提高网页性能。
如渲染任何网页时应用的层次结构所示，字体元素可以延迟其他元素的渲染，直到它们加载完毕。妥善管理这种延迟对于累积布局偏移 (CLS) 和用户感知都很重要。
字体加载的问题
在页面字体加载完成之前，HTML 和 CSS 渲染过程中字体的可见性因浏览器而异。以下是不同浏览器处理这种情况的总结：
| 浏览器 | 如果字体尚未准备好则默认行为... |
|---|---|
| 边缘 | 使用系统字体直到字体准备就绪。交换字体。 |
| 铬系列 | 将隐藏文本最多 3 秒。如果文本仍未准备好，则使用系统字体，直到字体准备好为止。换出字体。 |
| Firefox | 将隐藏文本最多 3 秒。如果文本仍未准备好，则使用系统字体，直到字体准备好为止。换出字体。 |
| Safari | 隐藏文本直到字体准备好。 |
为了解决这个问题而不依赖 关于浏览器行为，引入了font-display参数。目前92%的浏览器支持font-display参数。
Font-Display 起什么作用？
在页面加载过程中，字体的外观可能会有所不同，直到完全加载，具体取决于浏览器。例如，某些版本的 Safari 浏览器会隐藏文本，直到字体加载完成。 字体显示：交换 CSS 参数通过使用系统字体显示文本来标准化此行为，直到字体文件加载完成。一旦字体加载完成，系统字体就会被替换为目标字体。以下是示例用法：
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}预加载字体
使用在关键渲染路径之前加载字体可以防止字体加载时出现间隙。
奖励：字体使用的行业方法
根据 SimilarTech 的数据，让我们来看看互联网世界的一个重要趋势和快照。下面的第一个图表显示了字体使用情况 第一幅图显示了前 10,000 个页面上的字体使用情况，第二张图显示了前 100,000 个网站上的字体使用情况。我们先来看一下这些图表：
排名前 5 个网站和排名前 10,000 个网站之间 Google Font 和 Font Awesome 的使用率相差 100,000%。这告诉我们前 10,000 个网站已经优化了其字体使用。我们建议将此作为值得关注的主题进行研究。考虑如何使用自己的解决方案实现 Web 字体。
奖励 2：Google Font 和 Font Awesome 的使用情况统计
参照第一个奖励，我们建议检查两个图表，它们显示了最常用的字体库的数值范围。这里的唯一域名数量超过数百万， 这数百万代表你的 SEO 竞争对手。比其他人更好、更优化地使用这些库可以帮助您脱颖而出。
通过遵循这些提示并优化字体使用，您可以显著提高网络性能和用户体验。
