我正在使用Google Fonts中的Raleway作为我的项目的主要字体。
一切都很好,直到我注意到数字以“旧式”模式显示,这意味着一些数字具有从字体基线向上或向下延伸的上升部分或下降部分。这对于渲染大量数字的UI部分会影响可读性。
为了解决这个问题,我可以使用CSS来调整一些OpenType设置,如此描述:https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals 在Firefox和Edge上,设置
基本上,任何具有非常规CSS值(例如粗体)或字体样式(例如斜体)的元素都会将数字排列方式恢复为旧式。另外,在该特定元素上使用显式排列规则(font-feature-settings:“lnum”)也没有任何效果。
在Chrome中是否有任何解决方法?还是有适当的方法来全局定义数字排列方式?
我已经在CodePen中说明了这个问题。如果您在不同的浏览器中打开它,您会注意到IE和Firefox按预期工作,但Chrome和其他基于Webkit的浏览器会呈现如上所述:https://codepen.io/anon/pen/LdVoJG
一切都很好,直到我注意到数字以“旧式”模式显示,这意味着一些数字具有从字体基线向上或向下延伸的上升部分或下降部分。这对于渲染大量数字的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
@font-face
声明复制到自己的 CSS 中,并删除local(...)
引用来强制下载 Raleway。 - RoelN