本地文件的 Lighthouse "Ensure text remains visible during webfont load "

Question

灯塔指出了 3 个文件。

这些字体文件位于并托管在我们的服务器中，这就是它在头部部分的加载方式。

<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 时我也得到 404 urls

Answer 1

您需要使用font-display: swap;来启用font-swapping。

这告诉浏览器在等待字体时不要阻止渲染（好吧，它给了它很短的时间来加载字体，如果它没有及时收到它，将使用 fall-back 和当字体可用时换掉它。）。

你也应该内联这个 CSS 因为它是 critical CSS

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

您还需要考虑 woff2 format is not supported in Internet Explorer，因此您需要 font-awesome 字体的后备。

为清楚起见

您需要使用 @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');
}

本地文件的 Lighthouse "Ensure text remains visible during webfont load "

Lighthouse "Ensure text remains visible during webfont load " for local files

seo

fonts

webfonts

lighthouse

为清楚起见