如何修复并确保文本在webfont加载期间保持可见

Question

嗨，我在google page espeed中面临这个问题，我几乎把我的网站速度提高到100，唯一剩下的就是确保文本在网络字体加载期间保持可见

我已经在使用字体显示：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本地网络字体https://fonts.googleapis.com/css?family=MiriamLibre:400700/Users/admin/Documents/projects/font。css回退

这是我从https://github.com/swissspidy/local-webfont

Answer 1

检查你的主css文件，是否有css code@font-face？如果没有，请将上面的代码添加到你的主css或其他用于html页面的css中。您不需要将代码添加到html页面。

虽然你的代码是正确的，但如果它安装在html页面上，但在css文件中仍然没有代码字体显示：swap；

在css上编辑，在html页面上跳过

Answer 2

此属性

字体显示：交换；

救了我的命。完整示例如下：

@font-face {
  font-family: 'Pacifico';
  font-display: swap;
}

如果你使用的是谷歌字体，那么就使用

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Answer 3

你正在使用谷歌字体。最好添加

<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/