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

Posted 2023-03-07

【中文标题】如何修复确保文本在 webfont 加载期间保持可见

【英文标题】：How to fix Ensure text remains visible during webfont load

【发布时间】：2019-08-21 14:38:45

【问题描述】：

您好，我在 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得到的

【问题讨论】：

如果您再次检查您的网站，它是否解决了？我注意到font-display 属性效果没有被 Google Lighthouse 和 Google PageSpeed 拾取

【参考方案1】：

此属性

字体显示：交换；

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

@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">

【参考方案2】：

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

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

在你的 css 上编辑它，然后在 html 页面上跳过

【参考方案3】：

您正在使用谷歌字体。最好添加&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/