问题

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

这是一个说明:

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

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

动机

找到一种方法使字母高一点以占据可用的垂直空间,同时保持 font-size 不变。怎么做?

我尝试了什么?

稍微增加 font-size,但得出的结论是,如果我不能增加字母高度,我将不得不妥协以获得更小的图标,因此问题。

最佳答案

你可以 用 css3 属性 Scale : ( demo on dabblet.com )
html - 如何在不更改字体大小的情况下更改字形高度?-LMLPHP

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 解决您的问题。

关于html - 如何在不更改字体大小的情况下更改字形高度?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11010457/

10-12 12:40
查看更多