确保在Web字体加载期间文本仍然可见，在Google Pagespeed Insights中未得到解决。

Question

确保在Web字体加载期间文本仍然可见，在Google Pagespeed Insights中未得到解决。

10

即使在CSS中添加了font-display: fallback，在Google PageSpeed Insights报告中，“确保文本在 webfont 加载期间可见”问题仍未得到解决。

我该如何解决这个问题？

@font-face {
  font-family: Jura;
  src: url(../fonts/Jura-Regular.eot);
  src: url(../fonts/Jura-Regular.eot?#iefix) format('embedded-opentype'), url(../fonts/Jura-Regular.woff2) format('woff2'), url(../fonts/Jura-Regular.woff) format('woff'), url(../fonts/Jura-Regular.ttf) format('truetype'), url(../fonts/Jura-Regular.svg#svgFontName) format('svg');
  font-weight: 400;
  font-display: fallback;
}

- Hiran Narayanan

3个回答

1

我通过在 index.html 文件中的标签之间直接添加 @fontface 规则来解决了这个问题。你也可以尝试将 font-display 设置在 @fontface 规则的顶部。

font-display: fallback;
font-family: 'Montserrat';
src: local('Montserrat'), url('https://fonts.googleapis.com  /css?family=Montserrat:300,700') format('woff2');
font-style: normal;
font-weight: 700;

- Rafał Bochniewicz

这是一个Lighthouse / Pagespeed问题，还是在浏览器中运行方式相同？ - Даниил Пронин

1

这个问题可以通过在网站的head标签之间添加font-awesome在线JS库来解决。

https://fontawesome.com/how-to-use/with-the-api/setup/configuration#configuration

<html>
    <head>
        <script>
            FontAwesomeConfig = {searchPseudoElements: true}
        </script>
        <script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
   </head>
   <body></body>
</html>

- Sagar Pansuriya

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- K. Shaikh · Accepted Answer

10

我通过添加 font-display: swap; 来解决了这个问题。

@font-face{
    font-family:FontAwesome;
    font-display: swap;
    src:url(fonts/fontawesome-webfont.eot?v=4.5.0);
}

- K. Shaikh

3

虽然 font-face 可以用于普通字体，但不适合用于图标字体。实际上，swap 使用一个回退字体来显示等待真正的字体下载，然后它只是 "交换" 到真正的字体。然而，Font Awesome 没有备选字体，因此它将根据浏览器显示奇怪的字符或其他东西。您可以在这里检查一个非常好的答案-https://dev59.com/8FUM5IYBdhLWcg3wAsfv无法轻松绕过此问题，因此在使用图标字体时要小心。 - Nikolay