【问题标题】：Font messes up alignment of numbers字体弄乱了数字的对齐方式
【发布时间】：2015-11-03 17:01:47
【问题描述】：

我使用的是 Raleway 字体，但这种字体不能正确地将数字与字母对齐。

你可以在这个 sn-p 中看到这个：

    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>

我可以轻松解决这个问题吗？或者这只是一种错误的字体，我应该选择另一种吗？

【问题讨论】：

字体没有问题。一些字体的 Xheight 和基线是数字字符，与字母不同。这与字体的设计有关，不是问题
它的字体默认属性是呈现数字，它不是错误的字体。对于相同的对齐方式，您可以选择其他字体。
您必须使用另一种字体。这就是该字体显示数字的方式typecast.com/preview/google/Raleway
好的，感谢您的快速响应！
@musefan 你是对的。这将无法正常工作-应该测试更多案例。感谢您的提醒，

标签： html css fonts typography

【解决方案1】：

您可以在 CSS 的帮助下简单地进行更改将font-feature-settings: 'lnum' 1; 添加到您的 css 文件中

所以你的新 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/

【讨论】：

这个问题的唯一正确答案。我想，它应该被标记为正确的。
这里很好地解释了为什么这个 CSS sn-p 是解决方案：codesmite.com/article/fixing-raleway-and-similar-fonts-numerals

【解决方案2】：

问题

这是字体本身的一部分，不是您可以快速解决的问题（除非您处理的文本很少）。如果我们查看Google Font's page for the Raleway font，我们会发现数字与字母的对齐方式不同：

如果您不希望数字像这样对齐，您将不得不使用不同的字体。

修复

您可以通过将要更改对齐方式的数字包装在一个单独的元素中并分别调整它们的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>

【讨论】：

谢谢你非常明确的回答，我只是要寻找不同的字体

【解决方案3】：

2020 年演讲

取决于您可以添加的字体和浏览器

font-variant-numeric: lining-nums;

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

【讨论】：

【解决方案4】：

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";
}

【讨论】：

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

【解决方案5】：

这取决于你的字体支持的“数字大小写设置”功能。

您仍然可以关注this

延伸阅读UX stackexchange

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

我知道你很久以前就发布过这个问题，但是看看这个属性：

.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 中的 *，任何包含数字的文本都将更具可读性。

【讨论】：