在 Chrome 中通过字体粗细和字体样式重置 OpenType 设置

Question

我使用来自 Google Fonts 的 Raleway 作为我项目的主要字体。

一切都很好，直到我注意到数字以“旧式”模式显示，这意味着某些数字的升序或降序从字体的基线上升或下降。这会损害呈现大量数字的部分 UI 的可读性。

为了解决这个问题，我可以使用 CSS 来调整一些 OpenType 设置，如下所述：https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals

设置 font-feature-settings 和/或 font-variant-numric 在 Firefox 和 Edge 上运行良好，但对于应用了权重或样式规则的元素，Chrome 似乎忽略了它。

基本上任何具有font-weight（例如bold）或font-style（例如italic）的非常规CSS值的元素都会将数字衬里恢复为旧样式。此外，该特定元素上的显式衬里规则 (font-feature-settings: "lnum") 没有任何效果。

Chrome 有什么解决方法吗？或者是否有适当的方法来全局定义数字衬里？

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

Answer 1

这样做的原因是两个不同版本的 Raleway 一起使用。

Google 提供的版本只有那些旧式数字——它们没有内衬数字 (lnum)。因此，对于从 Google 服务器加载的所有字体，您会看到这些看起来不规则的数字。

但是您看不到它们的正常重量，因为它正在加载 Raleway 的本地版本。可安装版本（也称为“桌面版本”）包含 Raleway 附带的所有 OpenType 布局功能 — 包括衬里数字。因此对于所有设置为正常重量的文本，数字将更改为衬里数字。对于您尚未安装并将从 Google 获取的所有 Raleway 风格，将没有这些，因此您会看到不规则的。

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

我不知道为什么您会发现 Chrome 和 Firefox 之间存在差异 - 我确实遇到了您提到的问题，但我在两种浏览器中都遇到过，直到我卸载了本地版本的 Raleway。