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