css - 如何根据字体大小计算高度？

Question

当你写这个时:(在 Chrome 中)

<div style="font-size: 32px">txt</div>

其高度将为 37px。但这一个:

<div style="font-size: 16px">txt</div>

其高度为 18px。

所以我的问题是:是否有任何公式可以计算渲染时文本的高度是多少(基于字体大小)？

Answer 1

高度不是基于font-size，而是基于line-height，默认值为normal

Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.^ref

基本上，我们不知道 line-height 的确切值，但如果我们明确定义它，那么我们就可以知道确切的高度。

我将高度设置为1.5 x font-size的示例

$('div').each(function(){
  console.log($(this).height());
})

div {
  line-height:1.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="font-size: 32px">txt</div>
<div style="font-size: 16px">txt</div>

另一个高度为 35px 的高度:

$('div').each(function(){
  console.log($(this).height());
})

div {
  line-height:35px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="font-size: 32px">txt</div>
<div style="font-size: 16px">txt</div>

---

值得注意的是，如果考虑内联元素，结果会有所不同:

$('div').each(function(){
  console.log("div "+$(this).height());
})
$('span').each(function(){
  console.log("span "+$(this).height());
})

div,span {
  line-height:1.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="font-size: 32px">txt</div>
<div style="font-size: 16px">txt</div>

<span style="font-size: 32px">txt</span>
<span style="font-size: 16px">txt</span>

或者，如果 div 内有不同的 font-size 或不同的对齐方式:

$('div').each(function() {
  console.log("div " + $(this).height());
})

div {
  line-height: 1.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span style="font-size: 32px">txt</span>
  <span style="font-size: 16px">txt</span>
</div>
<div>
  <span style="font-size: 32px;vertical-align:text-top">txt</span>
  <span style="font-size: 32px">txt</span>
</div>

在第一种情况下，高度将仅根据字体属性定义(line-height 在这里不起作用)。

the height of the content area should be based on the font ^ref

On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height.

在第二种情况下，我们有一个更现实的示例，其中高度不仅基于line-height，而且还考虑不同元素的对齐方式找到我们放置所有它们所需的最终高度。

更多详细信息请参见:https://www.w3.org/TR/CSS2/visudet.html#line-height