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

Question

问题

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

这是一个例子:

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

动机

找到一种方法让字母稍微高一点以占用可用的垂直空间，同时保持 font-size 不变。怎么做？

我尝试了什么？

稍微增加font-size，但得出的结论是，如果我不能增加字母高度，我将不得不为更小的图标做出妥协，这就是问题所在。

Answer 1

您可以使用 css3 属性 Scale 来做到这一点:( demo on 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。这可能有助于从另一个 Angular 解决您的问题。