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

Question

问题

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

这是一个插图：

字体问题

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

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

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

score 21 · Accepted Answer

您可以使用 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. 这可能有助于从另一个角度解决您的问题。

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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