问题描述
灯塔要指出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，但它破坏了网址，并且灯塔无法识别该网址
<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
解决方法
您需要使用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');
}