小编leo*_*cer的帖子

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

嗨,我在 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');
    }

Run Code Online (Sandbox Code Playgroud)

我使用这个命令生成了这个 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得到的

css webfonts google-pagespeed google-fonts

16
推荐指数
2
解决办法
2万
查看次数

标签 统计

css ×1

google-fonts ×1

google-pagespeed ×1

webfonts ×1