直接下载字体包而不是使用<link href="" rel="stylesheet">

Question

我将无法在我们的托管服务器上访问互联网，所以我想知道是否有办法直接下载字体文件而不是链接到样式 sheet。

<style>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</style>

非常感谢。

Answer 1

Google Fonts 在每个字体页面顶部都有一个“下载系列”按钮，它提供了一个 ZIP 文件，每个字重都有 TTF。这是 Montserrat 的页面，您的示例中使用的字体：https://fonts.google.com/specimen/Montserrat

使用这些文件，您可以设置自己的本地样式表，使用 @font-face 规则引用 TTF 文件，如下例所示。

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-Medium.ttf") format("ttf"),
}

要了解更多信息，包括如何为粗体等变体分配不同的权重，请访问 MDN and CSS-Tricks。

Directly download font package instead of using <link href="" rel="stylesheet">