探究fontsize与字体height关系
文章目錄
- 基礎介紹
- 設計字體
- 為什么字體高度大于字體大小
- 字體的寬度
- 圖片底部的空白
基礎介紹
頂線： 文字頂部對齊的線
中線： 文字中部的畫線
基線： 英文字母下端沿線
底線： 文字底部對齊的線
line-height行高=fontsize+行距
接下來是比較重要的
也就是height與line-height之間的關系
height：就是盒子的高度
line-height：是行高，文字會處于行高的中間
當height=line-height時，文字處于div的垂直正中間
當height>line-height的時候，文字會處于div的偏中上，因為在這個過程當中，文字相對于line-height 是處于line-height的正中間，但是對于div盒子來說 是偏中上 非常容易理解
從上文得到fontsize就是文字的高度，是頂線到底線之間的距離
但在實際使用中，font-size經常不等于渲染的高度，如下圖所示：
對于筆者用的ProximaNova這個字體，設置font-size為30px，實際上高度為42px。為什么文字的高度不等于字號的高度？這得從字體設計說起。為此裝了一個FontForge和RoboFont軟件設計一款自己的字體。
設計字體
打開RoboFont，如下圖所示
雙擊l和y兩個字母，用鋼筆工具勾勒形狀，如下圖所示：
從上圖可以看到它有一些刻度和度量線，畫一個示意圖如下所示：
這些度量線的位置可以自己設置：
Units Per Em表示一個字的高度有1000個單位，baseline的坐標為0，其它線的坐標相對于baseline，如下圖所示：
然后把這個設計好的字體導出為my-font.ttf文件，在網頁通過@font-face引入，如下代碼所示：
然后使用這個font-family，你會發現，這個字體的font-size和height幾乎完全一致，如下圖所示，分別設置font-size為35px、45px、55px：
為什么我們設計的字體會如此“完美”，而其他人的字體高度總是要大一點呢？
為什么字體高度大于字體大小
為此我們用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可以讓可控制的區域更大，一般不會讓字剛好撐到底線和頂線，如下圖所示：
字體的寬度
可以在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。
再討論一個經典的問題。
圖片底部的空白
有以下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的后面跟上幾個字母，如下代碼所示：
這段空白的距離就是基線baseline到div底邊的距離。由于基線的坐標是0，底線的坐標為-250，所以基線到底線的距離為：
250 / 1000 * 40 = 10px
由于行高為60px，font-size為40px，所以底線到div的距離即半行距為：
（60 - 40）/ 2 = 10px
注：此處font-size大小即為字體實際高度，若不一致，則40需要乘以一定比例得到字體實際高度
因此基線到div底邊的距離就為：
10px + 10px = 20px
到這里就解釋了為什么會有空白，以及空白的大小怎么計算。
那怎么去掉這段空白呢，可以設置div的行高為0。并且需要注意的是在怪異模式和有限怪異模式下，為了計算行內子元素的最小高度，一個塊級元素的行高必須被忽略，所以即使不設置div的行高為0，圖片也是和div貼在一起的。
總結
以上是生活随笔為你收集整理的探究fontsize与字体height关系的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 服务器电源线的型号,服务器电源线接口类型
- 下一篇： 室内地图有哪些用途？