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

取决于用户代理。桌面浏览器（包括Firefox）使用默认值大约1.2 ，具体取决于元素的字体系列。^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>

在第一种情况下，高度将仅根据字体属性来定义（行高在此不起作用）。

内容区域的高度应基于字体^ref

在不可替换的嵌入式元素上，“ line-height”指定用于计算线盒高度的高度。

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

此处有更多详细信息：https://www.w3.org/TR/CSS2/visudet.html#line-height

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

1 个答案: