网站优化系列篇之01 — 网页字体可见性
在使用谷歌 PageSpeed Insights 网站测试工具时，诊断结果经常会有一项目：
确保文本在网页字体加载期间保持可见状态 利用 font-display 这项 CSS 功能，确保文本在网页字体加载期间始终对用户可见。了解详情。
思考： 1. 为什么它会出现这样的问题对我们网站有什么影响呢？ 2. 那我们要怎么优化处理这个问题呢？
原因： 字体通常是需要一段时间才能加载的大文件。为了解决这个问题，一些浏览器会在字体加载之前隐藏文本。因为字体首次未加载完成造成“不可见文本闪烁”，从而影响用户体验。
方法： 本指南概述了实现此目的的两种方法： 第一种方法非常简单，但没有通用的浏览器支持； 第二种方法需要更多的工作，但具有完整的浏览器支持。对您来说最好的选择是您将实际实施和维护的选择。
方法1：使用字体显示
前 | 后 |
|---|---|
@font-face { font-family: Helvetica; } | @font-face { font-family: Helvetica; font-display: swap; } |
font-display是用于指定字体显示策略的 API。swap告诉浏览器使用该字体的文本应立即使用系统字体显示。自定义字体准备就绪后，系统字体将被换出。
如果浏览器不支持font-display，浏览器将继续遵循其加载字体的默认行为。
这些是常见浏览器的默认字体加载行为：
浏览器 | 如果字体未准备好，则默认行为… |
|---|---|
Edge | 使用系统字体直到字体准备好。换出字体。 |
Chrome | 将隐藏文本长达 3 秒。如果文本还没有准备好，使用系统字体直到字体准备好。换出字体。 |
Firefox | 将隐藏文本长达 3 秒。如果文本还没有准备好，使用系统字体直到字体准备好。换出字体。 |
Safari | 隐藏文本直到字体准备好。 |
方法2：等待使用自定义字体，直到它们被加载 做更多的工作，可以实现相同的行为以在所有浏览器上工作。
这种方法分为三个部分：
- 不要在初始页面加载时使用自定义字体。这可确保浏览器立即使用系统字体显示文本。
- 检测自定义字体何时加载。可以使用 FontFaceObserver 库，这可以通过几行 JavaScript 代码来完成。
- 更新页面样式以使用自定义字体。
为了实现这一点，您可以期望进行以下更改：
- 重构您的 CSS，使其在初始页面加载时不使用自定义字体。
- 将脚本添加到您的页面。此脚本检测自定义字体何时加载，然后更新页面样式。