如何修复在网络字体加载期间确保文本可见

Question

嗨，我在Google PageSpeed上遇到了问题，我已经将我的网站速度提高到接近100，唯一剩下的问题是确保在Web字体加载期间文本仍然可见。我已经使用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 fallback

这些命令来自https://github.com/swissspidy/local-webfont

- leo Spacer

---

如果您再次检查您的网站，问题是否已经解决？我注意到font-display属性的效果并没有被Google Lighthouse和Google PageSpeed所捕捉。 - Akber Iqbal

Answer 1

您正在使用 Google 字体。为解决此问题，建议添加 &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/

- Abhilash

Answer 2

这个属性

font-display: swap;

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

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

如果你正在使用 Google 字体，则在 href URL 的末尾使用 &display=swap，如下所示：

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

- Shoaib Khalil

Answer 3

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

虽然您的代码是正确的，但如果它安装在HTML页面上，但在CSS文件中仍然没有代码font-display：swap;，它不会解决问题。

在您的CSS上进行编辑，并在HTML页面上跳过。

- Hans Ganteng