网站优化系列篇之01 — 网页字体可见性

在使用谷歌 PageSpeed Insights 网站测试工具时，诊断结果经常会有一项目：

确保文本在网页字体加载期间保持可见状态
利用 font-display 这项 CSS 功能，确保文本在网页字体加载期间始终对用户可见。了解详情。

思考：
1. 为什么它会出现这样的问题对我们网站有什么影响呢？
2. 那我们要怎么优化处理这个问题呢？

原因：
字体通常是需要一段时间才能加载的大文件。为了解决这个问题，一些浏览器会在字体加载之前隐藏文本。因为字体首次未加载完成造成“不可见文本闪烁”，从而影响用户体验。

方法：
本指南概述了实现此目的的两种方法：
第一种方法非常简单，但没有通用的浏览器支持；
第二种方法需要更多的工作，但具有完整的浏览器支持。对您来说最好的选择是您将实际实施和维护的选择。

方法1：使用字体显示

font-display是用于指定字体显示策略的 API。swap告诉浏览器使用该字体的文本应立即使用系统字体显示。自定义字体准备就绪后，系统字体将被换出。

如果浏览器不支持font-display，浏览器将继续遵循其加载字体的默认行为。

这些是常见浏览器的默认字体加载行为：

方法2：等待使用自定义字体，直到它们被加载
做更多的工作，可以实现相同的行为以在所有浏览器上工作。

这种方法分为三个部分：

• 不要在初始页面加载时使用自定义字体。这可确保浏览器立即使用系统字体显示文本。
• 检测自定义字体何时加载。可以使用 FontFaceObserver 库，这可以通过几行 JavaScript 代码来完成。
• 更新页面样式以使用自定义字体。

为了实现这一点，您可以期望进行以下更改：

• 重构您的 CSS，使其在初始页面加载时不使用自定义字体。
• 将脚本添加到您的页面。此脚本检测自定义字体何时加载，然后更新页面样式。