如何根据字体大小计算高度? [英] How does height will be calculated, based on font-size?

问题描述

当您编写此代码时:(在Chrome中)

When you write this: (in chrome)

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

其高度将为37px.但是这个:

its height will be 37px. but this one:

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

其高度将为18px.

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

So my question is: is there any formula to calculate how much will be a text's height when rendered (based on font-size)?

推荐答案

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

The height is not based on the font-size but the line-height and the default value is normal

取决于用户代理.桌面浏览器(包括Firefox)使用默认值大约1.2 ，具体取决于元素的字体系列.

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 的值，但是如果我们明确定义它，那么我们就可以知道确切的高度.

Basically, we don't know exactly the value of line-height but if we explicitely define it then we can know the exact 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>

需要注意的是，如果考虑内联元素，结果将有所不同:

Worth to note that the result is different if you consider an inline element:

$('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 或不同的对齐方式:

Or if you have different font-size inside a div or different alignment:

$('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>

在第一种情况下，高度将仅根据字体属性定义(行高在此不起作用).

In the first case, the height will be defined only based on the font properties (line-height play no role here).

内容区域的高度应基于字体 在不可替换的嵌入式元素上，"line-height"指定用于计算线盒高度的高度.

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

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

In the second case, we have a more realistic example where the height is not only based on the line-height but also consider the alignment of the different elements to find the final height we need in order to place all of them.

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

More details here: https://www.w3.org/TR/CSS2/visudet.html#line-height

这篇关于如何根据字体大小计算高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！