如何在不同的字体周围获得均匀的间距？

Question

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

我试图找到一种方法来填充＆＃34;周围＆＃34;无论选择什么字体，文本都一样。因此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的高度和类似的小写字母，没有上升和下降，因此无法获得字形的总高度。