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