确保文本在 webfont 加载期间保持可见 - TypeKit PageSpeed Insights

编程问答 2022-05-03

问题描述

我有一个网站 https://www.rosterelf.com/ 并且 Google PageSpeed Insights 不断对我说

确保文本在 webfont 加载期间保持可见

对于此代码 <link rel="stylesheet" href="https://use.typekit.net/dgp2bhj.css">

因此我研究了一些方法来解决这个问题，因此我更新到下面的代码

<link rel="stylesheet" href="https://use.typekit.net/dgp2bhj.css?family=proxima-nova&display=swap">

通过在上面的代码中附加添加 ?family=proxima-nova&display=swap。

但 Google PageSpeed Insights 仍然抛出同样的错误。

我尝试了一些其他方法，例如在 .htaccess 中启用缓存，例如 ExpiresByType text/css "access 1 month" 等......但此错误仍然存​​在。

有人可以指导我在这里做什么吗？

非常感谢。

解决方法

我找不到任何有关类似“?family=proxima-nova&display=swap”之类的文档适用于 typekit。如果您打开 https://use.typekit.net/dgp2bhj.css?family=proxima-nova&display=swap，您会看到字体显示设置为自动。

但是，您可以编辑 typekit 配置以将显示设置为交换，请参阅此文章： https://helpx.adobe.com/fonts/user-guide.html/fonts/using/font-display-settings.ug.html

如果您无法控制 typekit，您可以将显示设置为在您的本地 css 文件中交换：

@font-face {
            font-family: 'proxima-nova';
            src: local('proxima-nova'),url(https://use.typekit.net/dgp2bhj.css);
            font-display: swap;
 }
pagespeedpagespeedpagespeed-insightstypekit