css - 使用 Wordpress 中的字体添加“预加载”

Question

使用节点模块，我将此文件添加到我的主题中。但它显示在“Google Pagespeed Insight”中。考虑使用<link rel=preload>优先获取页面加载中稍后请求的资源。

在我的 CSS 文件中，它是这样导入的。

@font-face {
  font-family: 'Graphik Web';
  src: local('Graphik Web'), url('#{$spirit-font-path}Graphik-Regular-Web.woff2') format('woff2'),
  url('#{$spirit-font-path}Graphik-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

但它仍然不像谷歌 Pagespeed Insight 的报告那样工作。如果我认为遗漏了什么或添加了什么，请告诉我。

Answer 1

要摆脱该错误，您必须摆脱 @import （这里转换为 src url）。@import 指令阻止并行下载。您必须更改代码以使用链接标记在主 html 中导入 woff。