1. 什么是字號(hào)與行高

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

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

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

但是實(shí)際上，font-size經(jīng)常不等于渲染的高度，如下圖所示：

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

2. 設(shè)計(jì)字體

打開RoboFont，如下圖所示：（這個(gè)軟件經(jīng)常閃退，需要注意保存）

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

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

這些度量線的位置可以自己設(shè)置：

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

然后把這個(gè)設(shè)計(jì)好的字體導(dǎo)出為my-font.ttf文件，在網(wǎng)頁通過@font-face引入，如下代碼所示：

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

然后使用這個(gè)font-family，你會(huì)發(fā)現(xiàn)，這個(gè)字體的font-size和height幾乎完全一致，如下圖所示，分別設(shè)置font-size為35px、45px、55px：

為什么我們設(shè)計(jì)的字體會(huì)如此“完美”，而其他人的字體高度總是要大一點(diǎn)呢？

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

為此我們用FontForge打開ProximaNova.ttf，因?yàn)檫@個(gè)軟件可以查看字體的更多信息，就是界面丑了點(diǎn)。如下圖所示：

然后點(diǎn)擊Element -> FontInfo，切到OS/2的Metric標(biāo)簽，如下圖所示：

把鼠標(biāo)放到相應(yīng)的輸入框，FontForge會(huì)提示你Windows系統(tǒng)是使用Win Descent和Ascent決定字體內(nèi)容高度，而Mac是用的HHead Descent和Ascent。上面字體在Mac下的Ascent為1079，Ascent為-336，如下圖所示：

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

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

設(shè)置font-size為30px，實(shí)際上顯示42px，因?yàn)?0 * 1.4 = 42px，為進(jìn)一步驗(yàn)證，把我們設(shè)計(jì)的字體my-font改一下它的Ascent，如下圖所示：

這樣它的內(nèi)容區(qū)域高度就變成了1250unit，是字號(hào)大小的1.25倍，導(dǎo)出為一個(gè)新的字體，在網(wǎng)頁上使用，如下圖所示：

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

那么為什么設(shè)計(jì)師們要這樣搞呢，為什么不控制在1000個(gè)unit的范圍內(nèi)？首先因?yàn)槌Ｓ玫膗nit per em為有以下幾個(gè)值：

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

但是如果選1000的話，因?yàn)樗且粋€(gè)整千，比例什么的應(yīng)該會(huì)比較好控制。

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

4. 字體的寬度

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

y為400，z為500，也就是說y的寬度為高度的0.4，z的寬度為高度的0.5，因?yàn)楦叨仁?000.

font-size為50px的時(shí)候，4個(gè)yz的寬度為180px，如下圖所示：

因?yàn)?#xff1a;(50 * 0.4 + 50 * 0.5) * 4 = 180px。

再討論一個(gè)經(jīng)典的問題。

5. 圖片底部的空白

有以下html：

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

在瀏覽器下面顯示為：

為什么圖片不是和div底部貼在一起，而會(huì)有一點(diǎn)空白呢？

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

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

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

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

畫上輔助線：

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

250 / 1000 * 40 = 10px

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

（60 - 40）/ 2 = 10px

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

10px + 10px = 20px

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

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

參考：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。