如何在不改变字体大小的情况下更改字形高度？

Question

问题

对于与图标元素相邻的文本元素,字形高度未与图标高度对齐.文本元素由CSS设置样式,font-size: 20px;并且所有实例的宽度都一致.

这是一个例子:

对于上述情况,文本应与图标具有相同的高度.

动机

找到一种方法使字母更高一点,占用可用的垂直空间,同时保持font-size原样.怎么做？

我试过了什么？

增加font-size一点,但得出结论,如果我不能增加字母高度,我将不得不妥协为一个较小的图标,因此问题.

Answer 1

您可以使用css3属性执行此操作Scale:( 在dabblet.com上进行演示)

HTML标记:

<span class="lower">lower size</span>
<span>normal size</span>
<span class="taller">taller size</span>

CSS:

span {
    font-size: 20px;
    display: inline-block;
}

span.lower{ transform: scaleY(0.9); }
span.taller { transform: scaleY(1.1); }

此外,你可以尝试设置的各种值vertical-align在您的情况为图片: sub,super,bottom,top,middle.这可能有助于从另一个角度解决您的问题.