代码之家 › 专栏 › 技术社区 › Stefan Orzu

在Chrome中按字体大小和字体样式重置OpenType设置

opentype webkit fonts google-chrome css

4

Stefan Orzu · 技术社区 · 8 年前

我正在使用 Raleway 从谷歌字体作为我的项目的主要字体。

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

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

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

基本上是任何具有非常规CSS值的元素 font-weight (例如。 bold )或 font-style (例如。 italic )将数字衬里还原为旧式。还有明确的衬里规则( font-feature-settings: "lnum" )对那个特定的元素没有任何影响。

Chrome有什么解决方法吗?或者,有没有一种合适的方法来全局定义数字衬里?

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

1 回复 | 直到 8 年前

1

2

RoelN 8 年前

原因是两种不同版本的Raleway一起使用。

谷歌提供的版本只有那些旧式的数字,没有带衬里的数字( lnum )。因此,对于从Google服务器加载的所有字体,您将看到这些看起来不规则的数字。

但你看不到它们的正常重量,因为它装载的是 本地verson Raleway的。可安装版本(也称为“桌面版本”)包含Raleway附带的所有OpenType布局功能,包括内衬数字。因此,对于设置为正常重量的所有文本,数字将更改为衬线数字。对于所有您尚未安装且将从谷歌获取的Raleway,都不会有这些,因此您将看到不规则的。

尝试卸载Raleway的所有本地版本,然后重试代码笔。(注意:通过Typekit安装的字体必须通过Creative Cloud应用程序删除。)

我不知道为什么你会看到Chrome和Firefox之间的区别,我确实遇到了你提到的问题,但我在两种浏览器中都遇到了,直到我卸载了本地版本的Raleway。