如何解决本地文件的灯塔“确保在webfont加载期间文本仍然可见”
灯塔要指出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');
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。