Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/actionscript-3/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 如何修复并确保文本在webfont加载期间保持可见_Css_Webfonts_Google Pagespeed_Google Fonts - Fatal编程技术网

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

Css 如何修复并确保文本在webfont加载期间保持可见,css,webfonts,google-pagespeed,google-fonts,Css,Webfonts,Google Pagespeed,Google Fonts,嗨,我在google pagespeed中遇到了这个问题 我几乎让我的网站速度达到100,唯一剩下的是 确保文本在webfont加载期间保持可见 我已经在使用字体显示:swap;那为什么这不能解决我的问题呢 这是我的外部字体css @font-face { font-display: swap; font-family: 'Miriam Libre'; font-style: normal; font-weight: 400; src: l

嗨,我在google pagespeed中遇到了这个问题 我几乎让我的网站速度达到100,唯一剩下的是
确保文本在webfont加载期间保持可见

我已经在使用字体显示: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本地webfont/Users/admin/Documents/projects/font.css回退


我从

得到的,你正在使用谷歌字体。最好添加
&display=swap
来解决此问题

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


检查此项:

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

虽然您的代码是正确的,但如果它安装在html页面上,但在css文件中仍然没有代码字体显示:swap


在css上编辑它,在html页面上跳过它

如果您再次查看您的网站,它是否解决了?我注意到,
字体显示
属性效果并没有被谷歌灯塔和谷歌PageSpeed所接受