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

【问题标题】：how to change glyph height without changing the font-size?如何在不更改字体大小的情况下更改字形高度？
【发布时间】：2012-06-16 03:35:39
【问题描述】：

问题

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

这是一个插图：

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

想办法让字母更高一点以占用可用的垂直空间，同时保持font-size 不变。该怎么做？

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

不，这并不能解决问题，至少在我的情况下。也许毕竟我会增加font-size，但会再等一会儿，看看是否有人知道解决方案。
是的，这几乎是应该的。使用vertical-align，图像定位正确，但顶部和底部图像没有空间，并且为所有数据所在的单元格添加line-height 并不能解决此问题。有什么想法吗？
谢谢，到目前为止，这是我拥有的最好看的变体。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：