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

Question

我试过谷歌灯塔，它指出了一篇关于如何毫不拖延地加载字体的文章：

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