字体混乱影响数字对齐

Question

我正在使用Raleway字体，但是这种字体不能正确对齐数字和字母。

您可以在此片段中看到：

    h1 {
      font-family: Raleway;
        font-size: 2rem;
        border-bottom: 1px solid $text-color;
        border-top: 1px solid $text-color;
        padding: 2rem 0;
    }

<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>5 Comments</h1>

我能轻松解决这个问题吗？还是这只是一个有问题的字体，我应该选择另一个字体？

- sjbuysse

---

字体本身没有问题。有些字体在数字字符上的x高度和基线与字母不同，这与字体设计有关，不是问题。 - Pierre Irani

它的字体默认属性是呈现数字，这不是一个有问题的字体。 为了保持相同的对齐方式，您可以选择另一种字体。 - vivekkupadhyay

你必须使用另一种字体...这是这种字体显示数字的方式http://typecast.com/preview/google/Raleway - Mihai Matei

@NicoO：你确定要尝试并提供一个可行的例子吗？ - musefan

@musefan 你说得对。这样做不正确- 应该测试更多的情况。感谢提醒。 - Nico O

Answer 1

你可以通过CSS轻松更改。 在你的CSS文件中添加font-feature-settings: 'lnum' 1;即可。

这样，你的新CSS将是:

h1 {
        font-family: Raleway;
        font-size: 2rem;
        border-bottom: 1px solid $text-color;
        border-top: 1px solid $text-color;
        padding: 2rem 0;
        font-feature-settings: 'lnum' 1;
    }

也可以看看这个：http://clagnut.com/sandbox/css3/

- fluidbrush

---

这个问题只有一个正确答案。我认为应该将其标记为正确。 - Limbo

这里有一个很好的解释，为什么这个CSS片段是解决方案：https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals - Samuli Asmala

Answer 2

问题

这是字体本身的一部分，不是可以快速修复的问题（除非你处理的文本非常少）。如果我们查看 Raleway 字体的 Google 字体页面，我们将看到数字和字母有不同的对齐方式：

如果您不希望数字像这样对齐，则需要使用其他字体。

修复方法

您可以通过将要更改对齐方式的数字包装在单独的元素中并分别调整其vertical-align来解决此问题，但这可能需要比它值得的更多的努力。 下面我给出了一个例子：

h1 {
  font-family: Raleway;
  font-size: 2rem;
  border-bottom: 1px solid $text-color;
  border-top: 1px solid $text-color;
  padding: 2rem 0;
}

.raised {
  display: inline-block;
  vertical-align: 12%;
}

<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>
  <span class="raised">5</span>
  Comments
</h1>

- James Donnelly

---

谢谢您提供非常清晰的答案，我会寻找另一种字体。 - sjbuysse

Answer 3

2020演讲

根据字体和浏览器的不同，您可以添加

font-variant-numeric: lining-nums;

来源：https://css-tricks.com/almanac/properties/f/font-variant-numeric/

font-variant-numeric属性控制数字的显示方式。该属性包含以下几个值：

• normal：使用正常的数字显示方式。
• ordinal：将数字转换为序数（例如1变成1st）。
• slashed-zero：使用带有斜杠0的数字0来代替斜线字符。
• lining-nums：使用大写数字。
• oldstyle-nums：使用旧式数字，其中数字的高度和位置可以与字母不同。
• proportional-nums：使用等宽数字而非等高数字，因此数字的宽度可以根据其形状进行调整。
• tabular-nums：使用等宽数字，数字之间的空间相等。

- Bruno Mattelet

Answer 4

我创建了一个版本的Raleway字体，其中默认使用线性数字，作为此问题的明确解决方案。 您可以下载字体文件，或者只需将其嵌入您的HTML（使用<link>）或CSS（使用@import）中，只需一行代码，就像您使用任何其他Google字体一样。免费、开源，并提供所有权重和样式：

https://h-ibaldo.github.io/Raleway_Fixed_Numerals/

- Henrique Ibaldo

Answer 5

https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals

本文将详细解释并提供完全兼容的CSS3“解决方案”。

下面是实现魔法的代码：

.yourclass {
    -webkit-font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
}

- Tamplix

---

谢谢 - 将这个添加到Skeleton的normalize.css中的html元素是修复网站最快的方法。 - Bill McGonigle

Answer 6

这取决于您的字体是否支持“数字大小写设置”功能。不过，您可以按照此 链接 进行操作。

更多阅读请参考 UX stackexchange。

- 4dgaurav

Answer 7

这段代码适用于Raleway字体，我已经测试过并得到了结果

-webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum":

- Abdulla Saad KP

Answer 8

我知道您很久以前发布了这个问题，但是看一下这个属性：

.class, #id, tag, * {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings:"lnum" 1; 
  -moz-font-feature-settings:"lnum=1"; 
  -ms-font-feature-settings:"lnum" 1; 
  -o-font-feature-settings:"lnum" 1; 
  -webkit-font-feature-settings:"lnum" 1; 
  font-feature-settings:"lnum" 1;
}

它强制所有数字正确对齐，因此您只需在CSS中将此属性应用于*，任何包含数字的文本都会更易读。

- Estêvão Rolim