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

Question

问题

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

下面是一个说明：

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

动机

寻找一种方法使字母变得更高，以利用可用的垂直空间，同时保持font-size不变。如何做到这一点？

我尝试了什么？

稍微增加 font-size 的大小，但得出结论是，如果不能增加字母高度，则必须妥协使用较小的图标，因此产生了此问题。

- Leron

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。这可能会从另一个角度帮助解决您的问题。

- Vladimir Starkov

---

在我的情况下不起作用，但我会接受这个答案，因为显然它解决了问题。问题很可能出在我的代码中的某个地方。 - Leron

我添加了关于在图像中使用vertical-align的注释，也许这可以帮助你。 - Vladimir Starkov

谢谢，我会稍微尝试一下 vertical-align。感谢您提供的信息，我知道可以增加字母高度 :) - Leron

Answer 2

尝试添加line-height: 20px;，它只会增加行之间的间距。这应该有助于匹配元素高度。

考虑到你的日历图标和文本，请将vertical-align: middle;添加到图像中。

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

- Dipak

---

不，这并没有解决问题，至少在我的情况下是这样。也许最终我会增加 font-size，但会再等一段时间看看是否有人知道解决方案。 - Leron

是的，它几乎是应该的样子。使用 vertical-align 图像位置正确，但顶部和底部图像之间没有空间，为包含所有数据的单元格添加 line-height 也无法解决这个问题。有什么想法吗？ - Leron

谢谢，到目前为止这是我看过的最好的变体。 - Leron

Answer 3

不，你不能通过增加字体大小或更改字体来使字母变高。原则上，你可以减小字母间距，这样你就可以增加字体大小而不增加文本宽度。但这通常是一个不好的主意，因为它往往会使字体看起来更糟糕，而且往往不太易读。

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

- Jukka K. Korpela

---

请参见主题中的图片和说明，了解我想要做什么。 - Leron

@Leron 你想要将标签相对于图标垂直居中，还是真正使文本变高？ - Vladimir Starkov

两种方法都可以，但问题在于该列是从包含所有文本（如<img/>标签、文本等）的字符串中填充的。因此，我决定改变字母大小是最简单的方法。 - Leron