Question

嗨，我在Google Pagespeed中遇到了这个问题我几乎将网站速度提高到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那里得到的

Answer 1

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

尽管您的代码正确无误，但是如果将其安装在html页面上却无法解决问题，但是在css文件中仍然没有代码font-display：swap;

在CSS上对其进行编辑，然后在html页面上跳过

Answer 2

您正在使用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/

如何修复确保在Webfont加载期间文本仍然可见

2 个答案: