Safari 中无法正确加载可变字体

Question

我使用的是可变字体，它在 Chrome（版本 97.0.4692.71）和 Firefox (96.0.2) 上正常工作，但在 Safari (15.1) 上无法正常工作。

在 CSS 上，我像这样导入字体：

@font-face {
    font-family: 'Bild V3 Variable Web';
    font-style: normal;
    src: url('fonts/BildVariableV3-VF.woff2') format('woff2-variations'),
    url('fonts/BildVariableV3-VF.woff2') format('woff2');
    font-weight: 100 900;
}

像这样使用它：

h2 {
    font-family: Bild Variable V3;
    font-variation-settings: "wght" 300;
    font-size: 72px;
    color: $white;
}

有人知道为什么会发生这种情况吗？

Answer 1

轻松修复

对我来说，添加

font-weight: 1 1000;

属性使其也适用于 safari。不合适的字体粗细现已修复。

@font-face {
  font-family: 'Inter var', sans-serif;
  src: url('/fonts/Inter-roman-latin.var.woff2') format('woff2');
  font-weight: 1 1000;
}

• 还有一个好处是，您无需检查

  @support

  。
• 为了更加谨慎，请检查 MDN 文档中的字体粗细