1. 什么是字號與行高

什么是字號大小？字號大小就是字體的高度，例如設置字號為50px，那么它的高度如下圖所示：

什么是行距呢？如下圖所示：

其中半行距 = (lineHeight – fontSize) / 2。

但是實際上，font-size經常不等于渲染的高度，如下圖所示：

對于筆者用的ProximaNova這個字體，設置font-size為30px，實際上高度為42px。為什么文字的高度不等于字號的高度？這得從字體設計說起。為此裝了一個FontForge和RoboFont軟件設計一款自己的字體。

2. 設計字體

打開RoboFont，如下圖所示：（這個軟件經常閃退，需要注意保存）

雙擊l和y兩個字母，用鋼筆工具勾勒形狀，如下圖所示：

從上圖可以看到它有一些刻度和度量線，畫一個示意圖如下所示：

這些度量線的位置可以自己設置：

Units Per Em表示一個字的高度有1000個單位，baseline的坐標為0，其它線的坐標相對于baseline，如下圖所示：

然后把這個設計好的字體導出為my-font.ttf文件，在網頁通過@font-face引入，如下代碼所示：

@font-face {font-family: 'my-font';src:url('/Users/yincheng/Desktop/my-font.ttf');font-weight: normal;font-style: normal; }

然后使用這個font-family，你會發現，這個字體的font-size和height幾乎完全一致，如下圖所示，分別設置font-size為35px、45px、55px：

為什么我們設計的字體會如此“完美”，而其他人的字體高度總是要大一點呢？

3. 為什么字體高度大于字體大小

為此我們用FontForge打開ProximaNova.ttf，因為這個軟件可以查看字體的更多信息，就是界面丑了點。如下圖所示：

然后點擊Element -> FontInfo，切到OS/2的Metric標簽，如下圖所示：

把鼠標放到相應的輸入框，FontForge會提示你Windows系統是使用Win Descent和Ascent決定字體內容高度，而Mac是用的HHead Descent和Ascent。上面字體在Mac下的Ascent為1079，Ascent為-336，如下圖所示：

同時它的units of em仍然是1000，如下圖所示：

而它的內容區域content-area大小為1079 - (-336) = 1415是font-size 1000 unit的1415 / 1000 ~= 1.4倍，這就解釋了一開始提出的問題：

設置font-size為30px，實際上顯示42px，因為30 * 1.4 = 42px，為進一步驗證，把我們設計的字體my-font改一下它的Ascent，如下圖所示：

這樣它的內容區域高度就變成了1250unit，是字號大小的1.25倍，導出為一個新的字體，在網頁上使用，如下圖所示：

設置font-size為50px，它的content-area高度為50 * 1.25 = 62.5px。這就證明了上面的分析是對的。

那么為什么設計師們要這樣搞呢，為什么不控制在1000個unit的范圍內？首先因為常用的unit per em為有以下幾個值：

如果你的unit選得越大，那么曲線的光滑粒度可控制得更細，如下圖所示：

但是如果選1000的話，因為它是一個整千，比例什么的應該會比較好控制。

其次，大于1000可以讓可控制的區域更大，一般不會讓字剛好撐到底線和頂線，如下圖所示：

4. 字體的寬度

可以在RoboFont里面設置每個字的寬度，例如y這個字母我要讓它比z占的空間小一點，如下圖所示：

y為400，z為500，也就是說y的寬度為高度的0.4，z的寬度為高度的0.5，因為高度是1000.

font-size為50px的時候，4個yz的寬度為180px，如下圖所示：

因為：(50 * 0.4 + 50 * 0.5) * 4 = 180px。

再討論一個經典的問題。

5. 圖片底部的空白

有以下html：

<div style="border:1px solid #ccc"><img src="/Users/yincheng/Desktop/2.png"></div>

在瀏覽器下面顯示為：

為什么圖片不是和div底部貼在一起，而會有一點空白呢？

先來看一下這個空白有多大，如下圖所示，設置div的font-size為40px，line-height為60px：

div的高度為174，圖片的高度為154，因此這里空白的高度為174 - 154 = 20px。

為了輔助說明，在img的后面跟上幾個字母，如下代碼所示：

<div class="img-container"><img src="/Users/yincheng/Desktop/2.png">lyz</div>

畫上輔助線：

這段空白的距離就是基線baseline到div底邊的距離。由于基線的坐標是0，底線的坐標為-250，所以基線到底線的距離為：

250 / 1000 * 40 = 10px

由于行高為60px，font-size為40px，所以底線到div的距離即半行距為：

（60 - 40）/ 2 = 10px

因此基線到div底邊的距離就為：

10px + 10px = 20px

到這里就解釋了為什么會有空白，以及空白的大小怎么計算。

那怎么去掉這段空白呢，可以設置div的行高為0。并且需要注意的是在怪異模和有限怪異模式下，為了計算行內子元素的最小高度，一個塊級元素的行高必須被忽略，所以即使不設置div的行高為0，圖片也是和div貼在一起的。這個我們在《從Chrome源碼看瀏覽器如何構建DOM樹》討論過。

參考：

1. 深入了解CSS字體度量，行高和vertical-align

總結

以上是生活随笔為你收集整理的html table设置行高_字号与行高的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。