前言：當我們給一個元素設置font-size之後，會發現該元素也會被加上一個line-height，而且該line-height的高度跟font-size並不一致，那麼它們之間到底有什麼關係呢？
一、基礎表現
①、Chrome瀏覽器“微軟雅黑”字體，字體大小18px;
<body>
<style>
div { margin-bottom:4px; font-size:18px background: #ccc; font-family:"微軟雅黑"; }
</style>
<div>1234</div>
<div>hello</div>
<div>你好</div>
</body>
從中可以看出雖然數字、英文、中文字體表現出來實際的高度不一致，但是它們的行高都是一致的。都是24px; 相當於是font-size的大小上加了6px;
二、微軟雅黑字體
按照上面的方法，我對12px -- 32px字體大小文本進行了統計
從數據統計可得出:
（還有個結論在數據中沒體現，就是相同字體的文本，無論是數字、英文、中文，他們自動生成的行高都是相同的）
①、中文字體會相對規律些，實際高度與字體的差距都是1-2px之間，在60px的時候，已經差了有3px了，不過考慮到我們很少會用那麼大的字體，我們就先把他忽略了。
②、很遺憾的是，字體與行高的差距並不一直都是6px，而是會隨字體的變大而跟着變大，從數據中的表現來說，還算有些規律
③、最難把握的一點就是，數字、英文實際高度與字體大小的差距了，小字體還好，平均在4-6px之間，但是越往上，差距越來越大。這在開發時，設置大字體的數字、英文文本的時候，要特別注意。
④、還有個好消息是，“微軟雅黑”字體在Chrome瀏覽器，Firefox瀏覽器，Opera瀏覽器統計出來的數據是一樣的，但在Safari上有些自動生成的行高會多1px。
三、宋體
相較於“微軟雅黑”字體，“宋體”表現出來的文本實際高度、字體與行高之前的差距會穩定很多。