css - 如何使不同字体的间距均匀？

Question

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

我正在尝试找到一种方法，无论选择什么字体，都可以使文本“周围”的填充相同。所以 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";
}

Answer 1

这不可能，因为这种现象取决于字体的设计。 CSS 无法访问字体指标。字形使用由字体高度定义的垂直空间(并可能延伸到该空间之外)的方式由字体设计者决定。没有一个单一的数量来描述它。

唯一在理论上可用的与字体指标相关的量是 x 高度，通过 em 单位和通过 font-size-adjust 属性。后者的支持非常有限且有缺陷。此外，x高度只是字母x和类似小写字母的高度，没有升序和降序，因此对于计算字形的总高度没有帮助。