fonts - Lighthouse "Ensure text remains visible during webfont load "用于本地文件

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但它破坏了 url 并且灯塔无法识别该 URL

<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 tho 这些网址时，我也得到 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属性(property)。

@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');
}