字体弄乱了数字的对齐方式 [英] Font messes up alignment of numbers

问题描述

我正在使用Raleway字体，但是该字体不能正确地将数字与字母对齐.

您可以在以下代码段中看到它:

  h1 {字体家族:Raleway；字体大小:2rem；border-bottom:1px纯的$ text-color;border-top:1px固定的$ text-color;填充:2rem 0;}  

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

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

解决方案

问题

这是字体本身的一部分，不是您可以提供快速修复的内容(除非您要处理的文本很少).如果我们查看

如果您不希望数字像这样对齐，那么您将不得不使用其他字体.

修复

您可以通过以下方式解决此问题:将希望更改其对齐方式的数字包装在一个单独的元素中，并分别调整其 vertical-align ，但这可能会花费更多的精力.我在下面给出了一个示例:

  h1 {字体家族:Raleway；字体大小:2rem；border-bottom:1px纯的$ text-color;border-top:1px固定的$ text-color;填充:2rem 0;}.提高 {显示:inline-block;垂直对齐:12％；}  

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

I'm using the Raleway font, but this font doesn't align numbers properly with letters.

You can see this in this snippet:

    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>

Can I solve this easily? Or is this just a faulty font and should I chose another one?

解决方案

The Problem

This is part of the font itself and not something you can provide a quick fix for (unless you're dealing with very little text). If we look at Google Font's page for the Raleway font, we'll see that numbers have different alignment to letters:

If you don't want the numbers to be aligned like this, you're going to have to use a different font instead.

A Fix

You can fix this by wrapping the numbers you wish to change the alignment of in a separate element and adjusting their vertical-align separately, but this is probably going to be more effort than its worth. I've given an example of this below:

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>

这篇关于字体弄乱了数字的对齐方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！