如何修复确保在Webfont加载期间文本仍然可见 [英] How to fix Ensure text remains visible during webfont load

问题描述

我在Google Pagespeed中遇到了这个问题我几乎将网站速度提高到100，唯一剩下的就是确保文本在webfont加载期间保持可见

Hi I'm facing this problem in google pagespeed I almost get my site speed to 100 the only thing remaining is Ensure text remains visible during webfont load

我已经在使用font-display:swap;那为什么不能解决我的问题呢?

I'm already using font-display:swap; so why is this not fixing my problem.

这是我的外部字体CSS

here's my external font 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

I generated this css using this commands

npx local-webfont https://fonts.googleapis.com/css?family = Miriam + Libre:400,700 /Users/admin/Documents/projects/font.css后备

npx local-webfont https://fonts.googleapis.com/css?family=Miriam+Libre:400,700 /Users/admin/Documents/projects/font.css fallback

推荐答案

您正在使用Google字体.最好添加& display = swap 来解决此问题.

You are using google fonts. Its better to add &display=swap to fix the issue.

<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加载期间文本仍然可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！