在Chrome中通过字体粗细和字体样式重置OpenType设置 [英] OpenType settings reset by font-weight and font-style in Chrome

问题描述

我使用Google字体中的 Raleway 作为我的项目的主要字体.

I am using Raleway from Google Fonts as the main font for my project.

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

Everything was fine with it until I noticed that the numbers are displayed in "old-style" mode, which means that some digits have ascenders or descenders going up or down from the font's baseline. This harms readability for parts of the UI which render a lot of numbers.

为了解决这个问题，我可以使用CSS来调整一些OpenType设置，如下所述:

In order to fix this I can use CSS to tweak some OpenType settings, as described here: https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals

在Firefox和Edge上设置font-feature-settings和/或font-variant-numric的效果很好，但对于已应用了粗细或样式规则的元素，Chrome似乎会忽略它.

Setting font-feature-settings and/or font-variant-numric works just fine on Firefox and Edge, but Chrome seems to ignore it for elements which have weight or style rules applied to them.

基本上，任何具有font-weight(例如bold)或font-style(例如italic)非规则CSS值的元素都会将数字衬里恢复为旧样式.同样，对该特定元素的显式衬里规则(font-feature-settings: "lnum")也没有任何作用.

Basically any element which has a non-regular CSS value for font-weight (e.g. bold) or font-style (e.g. italic) will revert the numeral lining back to old-style. Also explicit lining rules (font-feature-settings: "lnum") on that particular element don't have any effect.

Chrome是否有任何解决方法?还是有一种适当的方法来全局定义数字衬里?

Is there any workaround for Chrome? Or is there a proper way to define the numeral lining globally?

我已经在CodePen中说明了此问题.如果您在不同的浏览器中打开它，您会注意到IE和Firefox可以按预期工作，但是Chrome和其他基于Webkit的浏览器按照上述说明进行渲染: https://codepen.io/anon/pen/LdVoJG

I've illustrated this issue in a CodePen. If you open it in different browsers you will notice that IE and Firefox work as expected but Chrome and other webkit-based browsers render it as described above: https://codepen.io/anon/pen/LdVoJG

推荐答案

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

The reason for this is that two different versions of Raleway are used together.

Google提供的版本仅包含那些旧样式数字-它们不带有衬砌数字(lnum).因此，对于从Google服务器加载的所有字体，您会看到这些看起来不规则的数字.

The versions served by Google only have those old style numerals — they don't come with the lining numerals (lnum). So for all fonts loaded from the Google servers, you'll see these irregular looking numerals.

但是您看不到它们的正常重量，因为它正在加载Raleway的本地版本.可安装的版本(也称为桌面版本")包含Raleway随附的所有OpenType布局功能-包括行号.因此，对于所有以常规粗细设置的文本，数字将更改为衬里数字.对于您尚未安装且将从Google获取的所有Raleway口味，将没有这些口味，因此您会看到不规则的口味.

But you don't see them for the normal weight, because it's loading a local verson of Raleway. An installable version (also known as the "desktop version") contains all of the OpenType layout features Raleway comes with — including lining numerals. So for all text set in the normal weight, the numerals will be changed to lining numerals. For all flavors of Raleway that you don't have installed, and will be fetched from Google, won't have these so you'll see the irregular ones.

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

Try to uninstall all local versions of Raleway and try the CodePen again. (Take heed: fonts installed through Typekit will have to be removed through the Creative Cloud app.)

为什么您看不到Chrome和Firefox之间的区别?我确实遇到了您提到的问题，但是在卸载了本地版本的Raleway之前，我都在两种浏览器中都遇到过这种情况.

Why you see a difference between Chrome and Firefox, I don't know — I did experience the problem you mention, but I did in both browsers, until I uninstalled my local version of Raleway.

这篇关于在Chrome中通过字体粗细和字体样式重置OpenType设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！