如何从字体大小计算div高度

Ale*_*kin 3 html css

有没有一种方法可以div知道包含的字体大小和字体,从而自动计算高度?浏览器如何计算?例:

<div style="font-size: 14px; font-family: courier">Text</div>
Run Code Online (Sandbox Code Playgroud)

以上div高度为16像素; 因为"font-family: times"它将是17px。

Mr *_*ter 5

恐怕您的问题的答案并不简单。

对于比例字体,行高为

  • line-height属性的值(如果设置为绝对长度)。
    <div style="line-height:20px">Text</div>将为20px高

  • line-height属性值乘以font-size属性(如果line-height是无单位值)。
    <div style="line-height:1.5; font-size:14px">Text</div>将为21px高

  • 或浏览器选择的某个值(如果line-height设置为默认值)normal
    <div style="font-size: 14px;">Text</div>通常高约17像素,但这可能因浏览器和/或字体而异

但是,对于等宽字体,例如您的示例中的“ Courier”,计算取决于浏览器和浏览器设置。
许多浏览器使用的font-size字体小于等宽字体的字体。这是历史惯例。约定没有说到底要缩小多少。
因此,对于等宽字体,所有选择均不适用。抱歉!