【第994期】字型大小與行高

前言

2017年7月13號早讀文章由前端早讀課專欄作者@李銀城分享。

正文從這開始～

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底部貼在一起，而會有一點空白呢？

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

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

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

lyz

畫上輔助線：

這段空白的距離就是基線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樹》討論過。

參考：

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

關於本文

作者：@ 李銀城

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！