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