即使在向CSS添加font-display:fallback之后,在google pagespeed洞察报告中也无法解决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;
}
最佳答案 我通过直接在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;