慢速网络连接下的字体显示设置

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

我个人非常不喜欢 FOUT。我理解它作为一个选项的存在,因为网页上文本的快速显示非常重要。我知道 font-display: swap; 因为其良好的性能而广受欢迎,但 FOUT 确实让我感到困扰。 Matt Hobbs

如果这篇帖子能带给读者一个信息,那就是 font-display: swap 对于拥有快速网络连接的用户来说是一个非常好的选择。但其无限的交换时间段可能会让慢速和不稳定的网络连接用户感到沮丧。如果您有用户在这种网络环境下访问您的网站(我敢肯定您迟早会遇到这种情况),那么您可能需要考虑使用 font-display: fallback 甚至 font-display: optional

我说过吧。 我喜欢 font-display: optional; 完全阻止 FOUT 的方式。字体要么超快地应用,要么根本不使用(但仍然异步下载)。很有可能,在下一次页面加载时,字体会被加载并缓存,然后使用。

请注意,这里讨论的是慢速连接,而不是用户尽可能减少数据用量的连接。如果是这种情况,请查看我们在 负责任的条件加载 中链接的一些近期文章。


而且,今年的 网页性能日历 充满了很棒的文章。

直接链接 →