嗨,我在谷歌页面速度中遇到了这个问题我几乎让我的网站速度达到 100,唯一剩下的就是 Ensure text remains visible during webfont load
我已经在使用font-display:swap;那么为什么这不能解决我的问题。
这是我的外部字体 CSS
@font-face {
font-display: swap;
font-family: 'Miriam Libre';
font-style: normal;
font-weight: 400;
src: local('Miriam Libre Regular'), local('MiriamLibre-Regular'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdTh798HsHwubBAqfkcBTL_fZ5P7.ttf) format('truetype');
}
@font-face {
font-display: swap;
font-family: 'Miriam Libre';
font-style: normal;
font-weight: 700;
src: local('Miriam Libre Bold'), local('MiriamLibre-Bold'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdT-798HsHwubBAqfkcBTL_X3LbrQsq_.ttf) format('truetype');
}
我使用此命令生成了此 css
npx local-webfont https://fonts.googleapis.com/css?family=Miriam+Libre:400,700/Users/admin/Documents/projects/font.css 后备
我从 https://github.com/swissspidy/local-webfont 那里得到的
您正在使用谷歌字体。最好添加&display=swap
来解决问题。
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:400,700&display=swap" rel="stylesheet">
检查这个 : https://www.infyways.com/fix-ensure-text-remains-visible-during-webfont-load/
字体显示:交换;
救了我的命。完整示例如下:
@font-face {
font-family: 'Pacifico';
font-display: swap;
}
如果您使用的是谷歌字体,请在 href url 末尾使用 &display=swap
,如下所示:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
检查您的主 css 文件,是否有任何 css 代码@font面?如果没有,请将上面的代码添加到您的主 css 或用于您的 html 页面的其他 css 中。您不需要将代码添加到 html 页面。
虽然你的代码是正确的,但如果它安装在 html 页面上,但它不会解决问题,但在 css 文件中仍然没有代码 font-display:swap;
在 css 上编辑它,然后跳过 html 页面