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

Question

有没有办法计算自动div高度知道包含的字体大小和系列？浏览器如何计算？例如：

<div style="font-size: 14px; font-family: courier">Text</div>

高于div的高度为16px;对于"font-family: times"，它将是17px。

Answer 1

我担心你的问题的答案是，这不是直截了当的。

对于比例字体，行高为

• MainViewSetters属性的值，如果它以绝对长度设置 protocol MainViewSetters: class { func updateUIData() } 将是20px高

如果line-height是无单位值，则

• 或<div style="line-height:20px">Text</div>属性的值乘以line-height属性。
  font-size将是21px高

如果line-height设置为默认值<div style="line-height:1.5; font-size:14px">Text</div>，则

• 或浏览器选择的某个值。
  line-height通常高约17px，但浏览器和/或字体可能会有所不同

但是，对于等宽字体，如示例中的“Courier”，计算取决于浏览器和浏览器设置。
对于等宽字体，许多浏览器使用比normal更小的尺寸。这是一个历史惯例。会议没有说明多少小一点。
所以对于等宽字体，所有的赌注都是关闭的。遗憾！

Answer 2

这将为您提供div的高度，在字体或其他内容之前。

 $(document).ready(function(){

     var outerHeight = $('div').outerHeight();
     alert(outerHeight);

});

Refer here

Answer 3

在这种情况下，容器的高度由line-height确定，Pure Method是自动计算的，并且可能因使用不同的字体而不同。 您可以强制高度显式设置CSS中的行高。

在这个小提琴中，我设置了前两个div＆＃39;行高为20px，而第三行则由浏览器计算：https://jsfiddle.net/wvp476cL/1/

您可以使用javascript获取（并设置）元素高度。