文章目錄

• • 基礎(chǔ)介紹
  • 設(shè)計(jì)字體
  • 為什么字體高度大于字體大小
  • 字體的寬度
  • 圖片底部的空白

基礎(chǔ)介紹

頂線： 文字頂部對(duì)齊的線
中線： 文字中部的畫(huà)線
基線： 英文字母下端沿線
底線： 文字底部對(duì)齊的線

line-height行高=fontsize+行距
接下來(lái)是比較重要的
也就是height與line-height之間的關(guān)系
height：就是盒子的高度
line-height：是行高，文字會(huì)處于行高的中間
當(dāng)height=line-height時(shí)，文字處于div的垂直正中間

當(dāng)height>line-height的時(shí)候，文字會(huì)處于div的偏中上，因?yàn)樵谶@個(gè)過(guò)程當(dāng)中，文字相對(duì)于line-height 是處于line-height的正中間，但是對(duì)于div盒子來(lái)說(shuō) 是偏中上 非常容易理解

從上文得到fontsize就是文字的高度，是頂線到底線之間的距離

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

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

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

打開(kāi)RoboFont，如下圖所示

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

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

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

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

然后把這個(gè)設(shè)計(jì)好的字體導(dǎo)出為my-font.ttf文件，在網(wǎng)頁(yè)通過(guò)@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：

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

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

為此我們用FontForge打開(kāi)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倍，這就解釋了一開(kāi)始提出的問(wèn)題：

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

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

設(shè)置font-size為50px，它的content-area高度為50 * 1.25 = 62.5px。這就證明了上面的分析是對(duì)的。那么為什么設(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ì)讓字剛好撐到底線和頂線，如下圖所示：

字體的寬度

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

y為400，z為500，也就是說(shuō)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)典的問(wèn)題。

圖片底部的空白

有以下html：

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

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

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

div的高度為174，圖片的高度為154，因此這里空白的高度為174 - 154 = 20px。為了輔助說(shuō)明，在測(cè)試驗(yàn)證時(shí)，可以在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
注：此處font-size大小即為字體實(shí)際高度，若不一致，則40需要乘以一定比例得到字體實(shí)際高度
因此基線到div底邊的距離就為：
10px + 10px = 20px
到這里就解釋了為什么會(huì)有空白，以及空白的大小怎么計(jì)算。

那怎么去掉這段空白呢，可以設(shè)置div的行高為0。并且需要注意的是在怪異模式和有限怪異模式下，為了計(jì)算行內(nèi)子元素的最小高度，一個(gè)塊級(jí)元素的行高必須被忽略，所以即使不設(shè)置div的行高為0，圖片也是和div貼在一起的。

總結(jié)

以上是生活随笔為你收集整理的探究fontsize与字体height关系的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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