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

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');
}