Chrome中字重和字体样式会导致OpenType设置重置

Question

我正在使用Google Fonts中的Raleway作为我的项目的主要字体。

一切都很好，直到我注意到数字以“旧式”模式显示，这意味着一些数字具有从字体基线向上或向下延伸的上升部分或下降部分。这对于渲染大量数字的UI部分会影响可读性。

为了解决这个问题，我可以使用CSS来调整一些OpenType设置，如此描述：https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals 在Firefox和Edge上，设置font-feature-settings和/或font-variant-numric运作良好，但Chrome似乎忽略了应用了权重或样式规则的元素。

基本上，任何具有非常规CSS值（例如粗体）或字体样式（例如斜体）的元素都会将数字排列方式恢复为旧式。另外，在该特定元素上使用显式排列规则（font-feature-settings：“lnum”）也没有任何效果。

在Chrome中是否有任何解决方法？还是有适当的方法来全局定义数字排列方式？

我已经在CodePen中说明了这个问题。如果您在不同的浏览器中打开它，您会注意到IE和Firefox按预期工作，但Chrome和其他基于Webkit的浏览器会呈现如上所述：https://codepen.io/anon/pen/LdVoJG

- Stefan Orzu

Answer 1

这是因为同时使用了两个不同版本的Raleway字体。从谷歌服务器获取的版本只有旧式数字，没有带有lining numerals（lnum）的版本。所以所有从谷歌服务器加载的字体都会显示这些不规则数字。

但是，对于正常字重，您看不到它们，因为它正在加载Raleway的本地版本。可安装版本（也称为“桌面版”）包含Raleway带有的所有OpenType布局功能，包括lining numerals。因此，对于所有设置在正常字重中的文本，数字将更改为lining numerals。对于您未安装并将从Google获取的所有Raleway变体，都不会具有这些特性，因此您将看到不规则的数字。

尝试卸载所有本地版本的Raleway，并再次尝试CodePen。（请注意：通过Typekit安装的字体必须通过Creative Cloud应用程序进行删除。）

我不知道为什么您在Chrome和Firefox之间看到了差异 - 我确实遇到了您提到的问题，但在卸载了我的本地版本的Raleway之前，在两个浏览器中都遇到了这个问题。

- RoelN

---

嗨@RoelN，感谢你的回答。我想你可能是对的，我在另一台没有Raleway本地安装的电脑上尝试了这个CodePen - 没有任何数字配对应用。在我的系统上，我安装了整个字体包，所以我期望数字应该可以正确地应用到任何地方，但如果CSS依赖于本地安装，则现在无关紧要。是否有办法欺骗Google字体以按照我打算的方式运作？ - Stefan Orzu

我会将您的答案标记为被接受的，因为它指出了Raleway是否本地安装会产生巨大差异。 - Stefan Orzu

你可以通过将 Google 的 CSS 中的 @font-face 声明复制到自己的 CSS 中，并删除 local(...) 引用来强制下载 Raleway。 - RoelN