font-face 在 safari 上不起作用 [jsfiddle 示例]答案

【问题标题】：font-face not working on safari [jsfiddle example]font-face 在 safari 上不起作用 [jsfiddle 示例]
【发布时间】：2020-07-13 20:49:23
【问题描述】：

我正在从 Google 字体加载具有 3 个粗细的字体，我可以在 Firefox 和 Chrome 上以 3 个粗细正确显示文本，但它在 Safari 中不起作用：

https://jsfiddle.net/vmarquet/u6ezqbrm/

Safari 不支持font-face 别名吗？

【问题讨论】：

标签： css fonts safari font-face google-fonts

【解决方案1】：

这应该适合你：https://jsfiddle.net/7czpo2s3/

当我测试您的样本时，Chrome 和 Safari 中仅显示常规重量。如果您安装了字体，您的其他 @font-face 声明可能一直在使用您的本地字体副本，但它们不适用于没有在本地安装它的其他任何人。

因为您使用的是 Google 字体，所以已经为您编写了使用托管字体的 @font-face 声明。如果你直接访问the Google Fonts URL，你会看到你得到了一个带有@font-face 声明的 CSS 样式表。所有款式的font-family 是蒙特塞拉特。您不想使用 font-family 名称使用不同的权重，而是要使用 font-weight 更改它。

这是我对您的示例所做的更改：

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700&display=swap" rel="stylesheet">

<style>
  .light,
  .regular,
  .bold {
    font-family: "Montserrat";
  }

  .light   { font-weight: 300; }
  .regular { font-weight: 400; }
  .bold    { font-weight: 700; }
</style>

<div class="regular">Montserrat</div>
<div class="light">Montserrat</div>
<div class="bold">Montserrat</div>

如果您在本地安装了 Montserrat 字体，您可能还想禁用它。然后，更容易判断事情何时正常运行，因为如果可用的话，Google 字体也会使用本地字体。

【讨论】：

这没有回答问题。我问了一个关于 Safari 上font-face 行为的具体问题，因为目前我的网站就是这样编写的，我不想用font-weight 重写所有内容。您提供了另一种实现相同功能的方法，但这不是我要的。
@vmarquet 另一种选择是直接从 Google Fonts (fonts.google.com/specimen/Montserrat) 下载字体文件，将它们转换为 WOFF 和 WOFF2，自行托管它们。然后你可以使用@font-face 声明来命名font-family 任何你想要的（包括你已经拥有的），但显然这需要更多的步骤。如果您将托管版本保留在 Google 字体上，则需要使用其 CSS 中已经提供的常规方法。