一個由line-height引起的血案與思考

爆炸

  最近UI走查，發現頁面中全部包含文字區塊的高度與設計稿中的高度徹底不一致，而後UI妹子就爆炸了!

  找了一下緣由，發現是因爲UI設計稿中設計的文字大部分是font-size:24px;line-height:24px,代碼實現時爲了避免至於每處都寫一遍字體大小，故直接在根節點上統一設置字體與字體大小爲24px，小部分不一致的地方再單獨設置字體大小，從而忽略了設置line-height爲字體的高度。形成的結果就是文字所在的行的行高高於設計稿中的行高。

爲何文字行高與字體大小不相等呢？

  翻了一下line-height的官方說明，以下所示：

  文檔裏說line-height的默認值爲normal,給normal的推薦設置值爲1.0到1.2之間。至關於若是設置了字體的大小而不設置line-height,那麼行高默認就爲字體的1.0-1.2之間的一個倍數。

  那麼，這個倍數到底具體是多少呢？

  在chrome的控制檯裏跟蹤了一下，看到項目中引入了normalize.css來初始化瀏覽器的默認css樣式。其中，就設置html的line-height爲1.15。

爲何normalize.css設置line-height默認爲1.15？

  翻了一下github中normalize.css的issues,在593號issues裏找到了答案，地址在這裏。

  大體過程是這樣的，有人發現相同字體與大小的文字在不一樣環境中line-height的值是不一致的，接着，就有人在crossbrowsertesting上作了個測試，得出的結論就是這個問題的的確確存在，並且差別還特別大

When the font size was 100px, the most common line height was 115px. However, results varied from 101px on Mac Firefox to 136px on Android Chrome.

  最終，因爲大部分的行高都爲115px,因此，爲了解決不一樣環境中相同字體與字號的文字行高不一致的問題，推薦設置默認line-height爲1.15

  看到這裏，想到一個問題，既然顯示設置line-height爲1.15是爲了解決環境兼容的問題。那麼，爲何不設置line-height:1即解決兼容問題，又解決因爲行高放大與UI設計稿不符的問題？ 。

設置overflow:hidden字體顯示不全的問題

  當設置文字line-height:1後，再設置文字所在的容器overflow:hidden很容易復現文字顯示不全的問題，好比下面：

dphyTxg

代碼以下：

<span style=" font-size:100px; line-height:1; overflow:hidden; border:1px solid #ddd; display:inline-block">dphyTxg</span>
複製代碼

注：這裏可使用div演示，而後去掉display:inline-block。使用div發現不知道爲毛markdown裏的樣例亂了...

爲何設置行高與字體大小一致文字會顯示不全？

  到這裏，才真正進入到深層次的緣由探究。

  對於這個問題，須要先了解字體度量，引用一下其它的文章說明，以下所示：

1. 原文地址
2. Deep dive CSS: font metrics, line-height and vertical-align
3. EM Square
4. FontForge

簡要解釋爲以下幾點：

1. 咱們設置font-size的高度其實是對應字體的EM square部分
2. 字體在設計時能夠超出EM square部分
3. 字體實際設計與EM square部分一致時，line-height:normal與line-height:1相等
4. 從上圖中能夠看到，ascender+descender>Em Size 即1100+540>1000,此時line-height:1.64,因此100px的文字默認的行高爲164px

樣例分析

  下面就以window環境下的默認字體微軟雅黑爲例實際看看line-height的計算。

h1

line-height:

代碼以下：

<h1 id="font" style="line-height:normal;font-size: 100px;font-family: 微軟雅黑">h1</h1>
<p>line-height: <code id="o1" style="font-size: 50px"></code></p>
<script> document.getElementById('o1').textContent = window.getComputedStyle(document.getElementById('font')).height; </script>
複製代碼

  從上面能夠看到微軟雅黑100px狀況在，在windows下行高顯示爲132px。經過FontForge來覈對一下看看是否是這樣的。

  從上圖中能夠看到，使用（ascender+descender)/Em Size,即(2167+536)/2048≈1.32，也就是line-height爲1.32.

結論

1. line-height:normal的值跟字體有關係，相同字體在不一樣環境也不同
2. 當line-height設置的值小於默認的值時就會存在顯示不全的問題
3. normalize.css設置line-height默認爲1.15，當字體line-height的normal大於1.15就會存在文字顯示不全的問題
4. 要解決字體在不一樣平臺line-height不一致的問題，需根據具體字體，選擇normal在不一樣平臺上的最大值設置

一個由line-height引起的血案與思考