html、css。给定字体大小占用了多少垂直像素？答案

【问题标题】：html, css. How many vertical pixels taken up by a given font-size?html、css。给定字体大小占用了多少垂直像素？
【发布时间】：2013-01-31 21:37:50
【问题描述】：

我有一个已知高度的 div，以 px 为单位。在这个 div 中，我有一些字体大小已知的文本，以 px 为单位。现在我想使用 padding-top 将文本向下推，使其接触到其下方的元素。但是，它不能通过推得太远来扩展 div。

如何计算填充？只需从 div-height 中减去 font-size，就会导致 div 扩展，即使我设置了 line-height:100%。是否有基于字体定义的高度 - 它总是相同的吗？还是取决于字体系列。我想它至少必须取决于字体粗细。

（不想使用 position:absolute 来解决下推问题。）

【问题讨论】：

请在 jsfiddle.net 上列出您的问题
也许你想了解vertical rythm
默认情况下添加填充只会增加总高度。您应该描述所需的渲染，最好使用图像。目前尚不清楚您是指字体的高度（根据定义，字体的大小）、某些字母的高度，还是其他的东西。无论如何，定位可能是比填充更好的方法。

标签： html css

【解决方案1】：

它因字体系列而异。每种字体都有不同的基线。如果您将容器的高度设置为与字体的高度匹配，则字体仍将悬挂在容器下方。这可以使用 line-height 居中，但是字体上方和下方仍然会有一些空间。

这里有一篇文章可以更好地解释这一点。

http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/

演示：

这也是我开始的演示。您可以轻松判断基线在哪里以及顶部有多少额外空间。当 line-height 设置为等于 font-size 时，它会垂直居中字体。但是，如您所见，顶部和底部仍有一些空白区域。所以字体本身与容器的高度并不完全相同。

HTML

<h1>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
<h1>abcdefghijklmnopqrstuvwxyz</h1>

<h2>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h2>
<h2>abcdefghijklmnopqrstuvwxyz</h2>

<h3>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h3>
<h3>abcdefghijklmnopqrstuvwxyz</h3>

<h4>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h4>
<h4>abcdefghijklmnopqrstuvwxyz</h4>

CSS

h1 { 
    font-family:sans-serif;
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    border:1px solid #CCC;
}

h2 { 
    font-family:serif;
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    color:blue;
    border:1px solid #CCC;
    line-height:34px; /*NOTE THIS ONE HAS LINE-HEIGHT*/
}

h3 { 
    font-family:"impact";
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    border:1px solid #CCC;
}

h4 {
    font-family:"Courier New";
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    border:1px solid #CCC;
}

FIDDLE 网址：

http://jsfiddle.net/KtY4F/9/

【讨论】：