字体弄乱了数字的对齐方式

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>

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

Answer 1

问题

这是字体本身的一部分，您无法提供快速修复（除非您处理的文本非常少）。如果我们查看 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>

Answer 2

这取决于 "the number case setting" 您的字体支持的功能。

您仍然可以按照 this

来完成

进一步阅读UX stackexchange

Answer 3

您可以在 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/

Answer 4

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

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

Answer 5

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

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

Answer 6

2020 年发言

根据字体和浏览器你可以添加

font-variant-numeric: lining-nums;

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

Answer 7

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

Answer 8

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

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

字体弄乱了数字的对齐方式

Font messes up alignment of numbers

html

css

fonts

typography

问题

修复