问题

Question

我使用的是Raleway字体，但此字体无法正确对齐数字。

您可以在此代码段中看到此内容：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

问题

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

如果您不希望这些数字与此对齐，则您将不得不使用其他字体。

修复

你可以通过将你希望改变数字的数字包装在一个单独的元素中并分别调整它们vertical-align来解决这个问题，但这可能比它的价值更多。我在下面给出了一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

取决于＆＃34;数字案例设置＆＃34;你的字体功能支持。

仍然可以按照this

进行操作

进一步阅读UX stackexchange

Answer 4

我创建了一个Raleway版本，默认使用衬里数字作为此问题的 The Definitive Solution 。您可以下载字体文件，或者只使用一行代码将其嵌入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";
}

字体会混淆数字的对齐方式

7 个答案:

问题

修复