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

Question

问题

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

这是一个例子：

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

动机

找到一种方法让字母更高一些，以占用可用的垂直空间，同时保持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。这可能有助于从另一个角度解决您的问题。

Answer 2

尝试添加line-height: 20px;只会增加行之间的空间。它应该可以帮助您匹配元素高度。

考虑到您的日历图标和文字，请将vertical-align: middle;添加到图片中。

演示：http://jsfiddle.net/rBpKL/3/

Answer 3

不，如果不增加字体大小或更改字体，就不能使字母更高。原则上，您可以减少字母间距，以便在不增加文本宽度的情况下增加字体大小。这通常是一个坏主意，因为它往往会使字体看起来更糟，而且通常不太清晰。

在上下文（代码或URL）中显示真正的问题可能有助于找到解决方案。