css - 如何最小化字体加载延迟？

Question

我尝试了 Google Lighthouse，它向我指出了一篇关于如何立即加载字体的文章:

https://developers.google.com/web/updates/2016/02/font-display

我使用的是 Open Sans，我以前是这样加载的:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

这篇文章有一个例子，我试着用它来代替:

@font-face {
  font-family: 'Open Sans';
  font-display: block;
  src: local('Open Sans'), url(https://fonts.googleapis.com/css?family=Open+Sans) format('woff2');
}

它不起作用。我做错了什么？

---

编辑:找到了。我必须保留我认为不再使用的 font-family: "Open Sans"。抱歉噪音。

Answer 1

你忘记了语音标记“”，你想要的在这里:

@font-face {
  font-family: 'Open Sans';
  font-display: block;
  src: local('Open Sans'), url("https://fonts.googleapis.com/css?family=Open+Sans") format('woff2');
}