字体弄乱了数字的对齐方式 [英] 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屋!