html – 字体混淆数字对齐

我正在使用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>

我能轻易解决这个问题吗？或者这只是一个错误的字体,我应该选择另一个？

解决方法

问题

这是字体本身的一部分,而不是你可以提供快速修复的东西(除非你处理非常少的文本).如果我们看一下Google Font’s page for the Raleway font,我们会看到数字与字母的对齐方式不同：

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

修复

你可以通过包装你希望改变单独元素中的对齐的数字并分别调整它们的垂直对齐来解决这个问题,但这可能比它的价值更省力.我举了一个这样的例子：

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>