如何在本地机器上测试 'font-display: swap'？

How to test 'font-display: swap' on your local machine?

为了克服不可见文本，PageSpeed Insights 建议在 @font-face 声明中使用 font-display: swap 为整个应用程序使用后备字体。我已将 属性 添加到我的 Web 应用程序的每个 @font-face，但我无法测试它，因为更改仍在我的本地计算机上。

那么，现在我该如何在我的本地机器上测试 font-display: swap 并确保其正常工作并可能捕获一些屏幕截图或有支持它的文档？

CSS font-display 是一个@font-face 描述符而不是属性，所以它在浏览器中的支持不能用特征查询来测试（CSS @supports 规则和 CSS.supports API).

交换值指示浏览器使用后备字体显示文本，直到自定义字体完全下载。这也称为“无样式文本的闪光”或 FOUT。

您可以查看此 link 了解更多信息。

我使用了内置的 Lighthouse 来实现这一点。据我所知，这是在本地测试相同内容的最佳方法。 查看下面的屏幕截图-

  • 在将font-display: swap添加到@font-face-enter image description here

    之前

  • 在@font-face-enter image description here

    后加上font-display: swap

参考：