本地文件的 Lighthouse“确保在 webfont 加载期间文本保持可见”

Question

我有 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"/>

我添加了&display=swap，但它破坏了网址，并且灯塔无法识别该网址

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

如何确保在这 3 个本地文件的 Webfont 加载期间文本保持可见。 添加 &display=swap 时我也得到 404 那些网址

Answer 1

您需要使用font-display: swap; 来启用字体交换。

这告诉浏览器在等待字体时不要阻止渲染（好吧，它给了它一个很短的时间来加载字体，如果它没有及时收到它，将使用一个后备并在什么时候换掉它字体可用。）。

您还应该内联这个 CSS，因为它是 critical CSS

&display=swap 部分是 Google CDN 参数，它不是浏览器内置的，因此需要删除。此外，由于您是从本地服务的，因此您不需要crossorigin="anonymous"。

您还需要考虑woff2 format is not supported in Internet Explorer，因此您需要为您的字体真棒字体提供后备。

为清楚起见

您需要使用@font 定义字体并添加font-display: 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');
}