如何使不同字体的间距均匀？答案

【问题标题】：How to get even spacing around different fonts?如何使不同字体的间距均匀？
【发布时间】：2014-12-07 16:20:43
【问题描述】：

不同的字体在这些框中的位置不同：

无论选择什么字体，我都试图找到一种方法来使文本“周围”的填充相同。所以y的底部和边框之间的空间应该和T的顶部和边框的间距一样。

（我希望这是有道理的？）

我可以手动调整行高/填充以使每种字体都很好地位于框的中间，但是如果有一些自动的方法来做到这一点会很好。

该屏幕截图的jsfiddle：http://jsfiddle.net/dtbaker/4qkv2ncL/2/

html:

<div id="bg">
    <div class="text">
        <span>Asdgh YiyjJT</span>
    </div>
    <div class="text">
        <span class="font1">Asdgh YiyjJT</span>
    </div>
    <div class="text">
        <span class="font2">Asdgh YiyjJT</span>
    </div>
    <div class="text">
        <span class="font3">Asdgh YiyjJT</span>
    </div>
</div>

css:

@import url('https://fonts.googleapis.com/css?family=Special+Elite:400,700,400italic,700italic|Lora:400,700,400italic,700italic|Lobster:400,700,400italic,700italic');

#bg{ background-color: #000; padding:20px; }
.text{
    padding:20px;
}
.text span{
    color:#CCC;
    background:#FFF;
    font-size:60px;
    font-weight:bold;
    line-height:1em;
    padding:2px;
}
.text span.font1{
    font-family:"Special Elite";
}
.text span.font2{
    font-family:"Lora";
}
.text span.font3{
    font-family:"Lobster";
}

【问题讨论】：

标签： css fonts

【解决方案1】：

这是不可能的，因为这种现象取决于字体的设计。 CSS 无法访问字体指标。字形使用由字体高度定义的垂直空间（并且可能超出该空间）的方式由字体设计者决定。没有单一的数量可以描述它。

与字体度量相关的唯一数量甚至在理论上可用是 x 高度，通过em 单位和font-size-adjust 属性。后者的支持非常有限和错误。此外，x 高度只是字母 x 和类似小写字母的高度，没有升序和降序，因此无法获得字形的总高度。

【讨论】：

谢谢 :) 说得通。