CSS字体变体设置无效

Question

我目前正在尝试使用可变字体。我的第一个测试是尝试使用font-variation-settings指令，但似乎不起作用。无论是在Codepen上还是在：

https://codepen.io/DailyMatters/pen/LrBvmz

这是我的当前CSS（看起来字体已经从Dropbox正确加载）：

@font-face {
  font-family: 'SourceSans';
  src: url('https://www.dropbox.com/s/fmonith639cs931/SourceSansVariable-Roman.ttf') format('truetype');
}

html {
  font-family: 'SourceSans', sans-serif;
}

p {
  font-variation-settings: "wght" 999, "wdth" 125;
}

但是在Chrome上也有同样的问题。

无论我如何更改“wght”轴，都没有任何变化。我用@font-face对相同字体进行了测试，它在Chrome上可以工作。使用font-variation-settings不起作用的原因是什么？

- Cláudio Ribeiro

---

你确定从Dropbox链接的字体有效吗？当我尝试时，它默认回到了Arial字体。 - IiroP

似乎我的浏览器和Codepen都无法加载字体文件，因为存在CORS问题。你有什么办法可以解决这个问题吗？主要是在Codepen上，因为我想制作一个演示。 - Cláudio Ribeiro

我之前在Chrome上遇到了同样的问题。突然间@font-face就停止工作了。我觉得可能是Chrome本身的一个bug或者其他什么原因。 - oldboy

你的Source Sans和Google字体版本都不包含wdth轴。你可以在这里查看所有可用的变量设计轴，使用JavaScript来实现，具体解释请参考"如何使用JavaScript获取可变字体轴？"。 - herrstrietzel

Answer 1

您需要在样式表的@font-face声明中添加font-stretch和font-weight属性，并使用您希望用于变体的范围。

此外，您必须确保所使用的字体实际上支持这些变体。变体可能会受到您使用的字体的限制。例如，请查看这里使用Google字体进行变体的支持情况。

我尝试让你的 Codepen 工作，但加载字体的服务器返回 404 错误，无法加载字体。

我猜你应该尝试这样做：

@font-face {
  font-family: 'SourceSans';
  font-weight: 400 900;
  font-stretch: 75 100;
  src: url('https://www.dropbox.com/s/fmonith639cs931/SourceSansVariable-Roman.ttf') format('truetype');
}

更多信息请参见：

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

并且

https://fonts.google.com/knowledge/using_type/loading_variable_fonts_on_the_web

- Wilt