是什么决定了从最高字母顶部到上边框的空间以及从字母最底部部分（如“y”的尾部）到下边框的空间？
Using FontForge, it looks like both the ascender and descender add up to be 1000em units and the 'em square' looks to be 1000. Which means font-size: 30px; should really be 30px.
<header>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</header>
<div style="font-family: 'Pacifico'; font-size: 30px; line-height: 30px; border: 1px solid red;">
Some play
</div>让我们首先枚举与您的特定字体相关的所有指标：
如果你设置font-size:30px那么内容区域将是52.68px
$(document).ready(function() {
setTimeout(function() {
console.log($('div#font span').outerHeight());
},500)
});span {
outline: 1px solid green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<div id="font" style="font-family: 'Pacifico'; font-size: 30px; outline: 1px solid red;">
<span>Some play</span>
</div>正如你可以清楚地看到p and y已经触及底部了。为了获得顶部部分，我们需要考虑大写字母高度 (840)，它等于25.2px for font-size:30px。我们将其添加到下降器中，我们得到38.79px
span {
display: inline-block;
transform: translateY(-7px);
}<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<div id="font" style="font-family: 'Pacifico'; font-size: 30px;line-height:39px; outline: 1px solid red;">
<span>Some play</span>
</div>但你会注意到l比大写字母有点高，如果添加更多字母，考虑所有不同的情况会变得更加棘手：
span {
outline: 1px solid green;
}<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<div id="font" style="font-family: 'Pacifico'; font-size: 30px; outline: 1px solid red;">
<span>ÂÄÏÎÖË ABCMNOPQTSome play gj </span>
</div>这些测试的结论是，您拥有将绘制所有角色的内容区域，并且您确信它们永远不会出去。该区域是 Ascender + Descender 的总和，但由于具有特定的文本，因此很难识别您正在使用的字符的区域。带或不带大写字母、带或不带下行字母、带或不带某些特殊字符等，您将不会得到相同的结果。
相关问题：特定文本字符可以改变行高吗？ https://stackoverflow.com/q/55978130/8620333