html – 字体混淆数字对齐

概述我正在使用Raleway字体,但此字体不能正确对齐字母. 您可以在此代码段中看到此内容： h1 { font-family: Raleway; font-size: 2rem; border-bottom: 1px solid $text-color; border-top: 1px solid $text-color; 我正在使用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 >5</span>  Comments</h1>

总结

以上是内存溢出为你收集整理的html – 字体混淆数字对齐全部内容，希望文章能够帮你解决html – 字体混淆数字对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。