在使用谷歌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，使其在初始页面加载时不使用自定义字体。
将脚本添加到您的页面。此脚本检测自定义字体何时加载，然后更新页面样式。
