Fonts 灯塔“；确保文本在webfont加载期间保持可见；对于本地文件

我有3个文件被灯塔指出

这些字体文件位于并托管在我们的服务器中，这是如何在head部分加载的

<link rel="preload" href="/etc.clientlibs/farmers/clientlibs/clientlib-base/resources/fonts/SlatePro-Bk.woff" as="font" type="font/woff" crossorigin="anonymous"/>
<link rel="preload" href="/etc.clientlibs/farmers/clientlibs/clientlib-libraries/resources/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>
<link rel="preload" href ="/etc.clientlibs/farmers/clientlibs/clientlib-base/resources/fonts/SlatePro-Medium.woff"  as="font" type="font/woff" crossorigin="anonymous"/>

如何确保这3个本地文件的Webfont加载期间文本保持可见。 当添加&display=swap到您需要用来启用字体交换的URL时，我也得到了404

这会告诉浏览器在等待字体时不要阻止渲染（这会给它很短的时间来加载字体，如果它没有及时接收到字体，将使用回退，并在字体可用时将其调出）

您还应该按原样内联此CSS

&display=swap

部分是一个Google CDN参数，它不是内置在浏览器中的，因此需要删除。此外，由于您在本地提供服务，您不需要

crossorigin=“anonymous”

你也需要考虑一下，所以你需要一个字体字体的后退。 为了清楚起见 您需要使用

@font

定义字体，并添加

字体显示：swap

属性

@font-face {
  font-family: 'SlatePro-Bk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../etc.clientlibs/farmers/clientlibs/clientlib-base/resources/fonts/SlatePro-Bk.woff) format('woff');
}

您需要使用启用字体交换

这会告诉浏览器在等待字体时不要阻止渲染（这会给它很短的时间来加载字体，如果它没有及时接收到字体，将使用回退，并在字体可用时将其调出）

您还应该按原样内联此CSS

&display=swap

部分是一个Google CDN参数，它不是内置在浏览器中的，因此需要删除。此外，由于您在本地提供服务，您不需要

crossorigin=“anonymous”

你也需要考虑一下，所以你需要一个字体字体的后退。 为了清楚起见 您需要使用

@font

定义字体，并添加

字体显示：swap

属性

@font-face {
  font-family: 'SlatePro-Bk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../etc.clientlibs/farmers/clientlibs/clientlib-base/resources/fonts/SlatePro-Bk.woff) format('woff');
}

---

所以无论我在哪里

@font-face{}

我都需要添加

font-display:swap？目前在我的样式表中，这个
@font-face
显示了20多次，是否将其添加到每个？对不起，我应该说得更清楚些，我已经把它添加到了claritycan的答案中。我无法访问您链接的文件，但是是的，任何字体都应该交换。如果你有20种字体，你就有一个比字体交换更大的问题。所以看起来它现在正在工作，lighthouse不再调用那些链接了，但这会不会导致IE出现任何问题，因为字体显示不工作？没有任何浏览器无法识别的CSS属性被忽略。正如我所说的，尽管你需要一个替代的字体，因为woff2不受支持。所以无论我在哪里
@font-face{}
我都需要添加
字体显示：swap？目前在我的样式表中，这个
@font-face
显示了20多次，是否将其添加到每个？对不起，我应该说得更清楚些，我已经把它添加到了claritycan的答案中。我无法访问您链接的文件，但是是的，任何字体都应该交换。如果你有20种字体，你就有一个比字体交换更大的问题。所以看起来它现在正在工作，lighthouse不再调用那些链接了，但这会不会导致IE出现任何问题，因为字体显示不工作？没有任何浏览器无法识别的CSS属性被忽略。就像我说的，尽管你需要一个字体的替代品，因为woff2是不受支持的。