字体显示未修复 Page Speed Insights 问题答案

【问题标题】：font-display not fixing Page Speed Insights issue字体显示未修复 Page Speed Insights 问题
【发布时间】：2019-08-03 22:28:24
【问题描述】：

我正在努力提高我的网站的性能，我从 Google Page Speed Insights 给我的建议开始。

我似乎无法解决这个问题：

建议在此页面上使用 font-display CSS 属性 - https://developers.google.com/web/updates/2016/02/font-display

我已经这样做了：

@font-face {
  font-family: 'Malaga OT Reg';
  font-display: swap;
  src: url('./MalagaOT-Reg.eot');
  src: url('./MalagaOT-Reg.eot?#iefix') format('embedded-opentype'),
    url('./MalagaOT-Reg.woff2') format('woff2'), url('./MalagaOT-Reg.woff') format('woff'),
    url('./MalagaOT-Reg.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-300.eot');
  src: url('./MuseoSansRounded-300.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-300.woff2') format('woff2'),
    url('./MuseoSansRounded-300.woff') format('woff'),
    url('./MuseoSansRounded-300.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-900.eot');
  src: url('./MuseoSansRounded-900.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-900.woff2') format('woff2'),
    url('./MuseoSansRounded-900.woff') format('woff'),
    url('./MuseoSansRounded-900.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-700.eot');
  src: url('./MuseoSansRounded-700.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-700.woff2') format('woff2'),
    url('./MuseoSansRounded-700.woff') format('woff'),
    url('./MuseoSansRounded-700.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-100.eot');
  src: url('./MuseoSansRounded-100.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-100.woff2') format('woff2'),
    url('./MuseoSansRounded-100.woff') format('woff'),
    url('./MuseoSansRounded-100.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-500.eot');
  src: url('./MuseoSansRounded-500.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-500.woff2') format('woff2'),
    url('./MuseoSansRounded-500.woff') format('woff'),
    url('./MuseoSansRounded-500.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Museo';
  font-display: swap;
  src: url('./Museo-700.eot');
  src: url('./Museo-700.eot?#iefix') format('embedded-opentype'),
    url('./Museo-700.woff2') format('woff2'), url('./Museo-700.woff') format('woff'),
    url('./Museo-700.ttf') format('truetype'), url('./Museo-700.svg#Museo-700') format('svg');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Museo';
  font-display: swap;
  src: url('./Museo500-Regular.eot');
  src: url('./Museo500-Regular.eot?#iefix') format('embedded-opentype'),
    url('./Museo500-Regular.woff2') format('woff2'), url('./Museo500-Regular.woff') format('woff'),
    url('./Museo500-Regular.ttf') format('truetype'),
    url('./Museo500-Regular.svg#Museo500-Regular') format('svg');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Museo';
  font-display: swap;
  src: url('./Museo900-Regular.eot');
  src: url('./Museo900-Regular.eot?#iefix') format('embedded-opentype'),
    url('./Museo900-Regular.woff2') format('woff2'), url('./Museo900-Regular.woff') format('woff'),
    url('./Museo900-Regular.ttf') format('truetype'),
    url('./Museo900-Regular.svg#Museo900-Regular') format('svg');
  font-weight: 900;
  font-style: normal;
}

但这并没有对 PageSpeed 报告产生影响。我已经为font-display 属性尝试了swap 和fallback 值。

有人可以就我如何解决这个问题提供任何建议吗？

【问题讨论】：

font-display:optional 应该可以解决问题。
刚试过。可悲的是，它没有帮助:(
奇怪的是，font-display 属性值为 swap、optional 和 fallback 不会导致 FOIT（不可见文本闪烁）。只有 font-display: block 会导致 FOIT。更多信息可以找到here

标签： css optimization fonts pagespeed lighthouse

【解决方案1】：

根据我的经验，它适用于 font-display: swap;，但 PSI 报告可能需要几天时间才能注意到您的改进，尤其是移动设备。

【讨论】：

【解决方案2】：

去掉woff2，只保留woff格式。
设置 font-display 属性为阻塞；

字体显示：块；
您也可以选择删除 tiff 和 eot 引用以加快站点速度。

【讨论】：

【解决方案3】：

嘿，我遇到了完全相同的问题。然后我将这段代码添加到我的 style.css 和我的主题的自定义 > 附加 css 部分，Google 停止发出这些警告：

@font-face {
  font-family: "Open Sans Regular";
  src: url("https://fonts.googleapis.com/css2?family=Open+Sans");
  font-display: swap;
}

【讨论】：