确保在Webfont加载期间文本仍然可见，而Google Pagespeed见解中没有解决该问题

Question

即使在添加font-display: fallback到CSS 之后，也无法确保在webfont加载问题期间文本仍然可见，而在Google Pagespeed Insights报告中也无法解决。

我该如何解决该问题？

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

Answer 1

I got rid of it by adding font-display: swap;

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

Answer 2

我通过直接在index.html 中的标签之间添加@fontface规则解决了这个问题。您还可以尝试在@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;