如何在本地机器上测试 '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 来实现这一点。据我所知,这是在本地测试相同内容的最佳方法。
查看下面的屏幕截图-
参考:
为了克服不可见文本,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 来实现这一点。据我所知,这是在本地测试相同内容的最佳方法。 查看下面的屏幕截图-
参考: