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

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字体的Raleway字体页面,我们会看到数字与字母的对齐方式不同:

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

修复

你可以通过包装你希望改变单独元素中的对齐的数字并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

你可以简单地在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

2020年演讲

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

font-variant-numeric: lining-nums;

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