html，css。給定字體大小佔用了多少個垂直像素？

我有一個已知身高的div，在px中。在這個div中，我有一些已知字體大小的文本，在px中。現在我想使用填充頂部將文本向下推，以便觸及它下面的元素。但是，它不能推得太遠。html，css。給定字體大小佔用了多少個垂直像素？

如何計算填充？只需從div-height減去字體大小，即使我設置line-height：100％，div也會展開。是否有基於字體的定義高度 - 是否總是相同？還是取決於字體家族。我想至少它應該取決於字體的重量。

來源

2013-01-31 user984003

普萊斯e使jsfiddle.net概述您的問題 –

也許您想了解[vertical rythm]（http://24ways.org/2006/compose-to-a-vertical-rhythm/） – mkk

添加填充默認情況下會增加總高度。您應該描述所需的渲染，最好使用圖像。目前還不清楚你是指字體的高度（根據定義字體的大小），某些字母的高度，還是別的。無論如何，定位可能比填充更好。 –

它取決於字體系列：

（絕對解決下推問題不想使用位置）。每種字體都有不同的基準。如果您將容器的高度設置爲與字體的高度相匹配，那麼字體仍然會懸掛在容器下方。這可以使用行高進行居中，但字體上下仍會有一些空格。

這是一篇更好地解釋這一點的文章。

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

DEMO：

另外這裏的演示中，我開始了。您可以輕鬆分辨出基線的位置以及頂部有多少額外空間。當行高設置爲等於字體大小時，它會垂直居中放置字體。但是，正如你所看到的，頂部和底部仍然有一些空白。所以字體本身與容器的高度不完全相同。

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/

來源

2013-01-31 22:10:07

html，css。給定字體大小佔用了多少個垂直像素？

回答

相關問題