Question

关于为什么数字和字母在不同高度呈现的任何想法？我正在使用Bootstrap 3。

HTML

<ul class="list-group">
            <li class="list-group-item">HTML5</li>
            <li class="list-group-item">CSS3</li>
            <li class="list-group-item">Javascript</li>
            <li class="list-group-item">jQuery</li>
            <li class="list-group-item">Github</li>
            <li class="list-group-item">Bootstrap</li>
</ul>

CSS

#small-skills .list-group .list-group-item {
color: inherit;
border: 0.056em solid #c80a48;
background-color: inherit;
font-size: 1.2em;
}

在此处查看截图

http://imageshack.com/a/img911/1327/yTsaIZ.png

Answer 1

使用字体＆＃39; Raleway＆＃39;更改字体修复了问题。

Answer 2

由于没有标记或css更改它，它必须是执行此操作的实际字体。有几种方法可以解决这个问题。

1）完全改变字体。

2）仅为数字创建一个字体，并将另一个字体作为声明中的第二个字体：

font-family: numberFont, regularFont

3）让字体指定您想要的数字：

@font-face {
   font-family: numberFont
   /*finish rest of font details here*/
   unicode-range: U+30-39
}

4）在每个数字周围添加标记：

Number <span class="number">123</span>

并添加CSS以进行相应调整：

.number {
  font-family: Arial; /* Change Font */
  position: relative;
  top: -1em; /* Adjust positioning */
}

html5文本中的字母和数字不同的高度

2 个答案: