Question

我正在尝试改善网站的性能，并从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报告没有影响。我已经尝试了swap属性的fallback和font-display值。

有人可以提供任何有关如何解决此问题的建议吗？

Answer 1

删除woff2，仅保留woff格式。
将字体显示属性设置为阻止；

font-display：block;
您也可以删除tiff和eot引用，以加快网站访问速度。

Answer 2

以我的经验，它可以与font-display: swap;一起使用，但是PSI报告可能需要几天的时间来记录您的改进，尤其是移动版。

Answer 3

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

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

字体显示无法解决Page Speed Insights问题

3 个答案: