字体在Safari中不起作用[jsfiddle示例]

Question

我正在从Google字体中加载具有3种粗细的字体，并且可以在Firefox和Chrome上以3种粗细正确显示文本，但是在Safari中无法使用：

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

Safari是否不支持font-face别名？

Answer 1

[当我测试您的样品时，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字体还会使用本地字体（如果可用）。