不要直接从 Google Fonts URL 中复制 @font-face

我不认为这是一个普遍现象，但我见过几次，甚至还提倡过这样做。我的意思是……

您访问 Google Fonts 并选择一个字体，例如 Open Sans，它会为您提供一个 <link> 或一个带有 URL 的 @import，以便在您的网站上使用此字体。

您可以查看它返回的内容……

当然，只是一些 @font-face 声明！

现在，您注重性能的大脑开始运作了。等等。因此，我为此样式表发出一个 HTTP 请求，然后它会为它链接的那些 woff2 文件发出更多 HTTP 请求。绕过中间人，为什么不直接从这里复制这些 @font-face 块并使用它们呢。

您可以！但是！

问题在于 Google 在这里使用了巧妙的 Google 方法，并且该原始样式表的内容会根据请求它的浏览器而发生变化。上面的屏幕截图是 Chrome 66。以下是 Windows 7 上的 Firefox 20

它不一样！它只有 woff，没有 woff2。如果我们在 IE 8 中打开该 URL，我们将获得一个包含 eot 格式的 @font-face 块！

重点是，该 URL 提供的内容非常具体地针对当前浏览器需要的内容。这是一件非常棒的事情，可以将其抽象出来，无需担心。如果新的浏览器需要新的格式和新的 CSS 语法，它将自动随之而来。

这并不是说 Google Fonts 在这方面完美无缺。例如，通过不控制您自己的 @font-face 块，您无法利用 font-display，这很可惜。也许我们将来会实现这一点，或者也许值得自行托管您的 Google Fonts，这是我们将来会讨论的另一件事。