草珊瑚理解IFC(inline formatting context) - samwu－IT工程師數位筆記本

文章出處

1. 認識字體font-family

字體渲染的實際高度，
由字體本身的設置（升部ascender，降部descender，大寫字母高度Capital Height，小寫字母高度X-Height等等）
和
用戶定義的font-size
來決定。

所以同樣的font-size,不同的font-family會產生不同高度的元素。

比如Catamaran字體，
em-square是1000個單位。
升部是1100，降部是540。
在Mac OS上的HHead Ascent/ Descent值，Windows上的Win Ascent/Descent值（這些值可能是不同的！）。
Capital Height(大寫字母高度)是680，X height(小寫字母高度)是485。

這說明font-faimly:100px的Catamaran字體，content-area（字體渲染后的實際占用像素）為164px。
大寫字母是68px（680單位），小寫字母(X字高)高49像素（485單位）。

2. 理解line-box

line-box的高度由
子節點的最高點
到
子節點的最低點
來決定。

具體來說line-box的高度由子節點的font-size,font-family,line-height,vertic-align決定。

3. 什么是line-height

line-height是指字體的行間距值，簡稱行高。
line-height所決定的區域如圖所示。

注意：它不是基線之間的距離。
當line-height:normal;時，行間距大小其實就是content-area大小。如下

當line-height:1;時，行間距大小由font-size來決定。如下

這時行間距大小很可能跟content-area不同。
這樣就導致行之間的文字可能會重疊。

下面兩個場景展示了不同的line-height對line-box高度的影響。

當子節點line-height:normal;vertic-align:base-line;font-size:100px;一致，而font-family不同時

我們看到，第二個line-box比其他的高，因為第三個ba使用了Catamaran字體。其content-area為164px，比其他字體高。
當line-height:200px;vertic-align:base-line;font-family:Catamaran;一致，而font-size不同時

我們看到這時line-box被撐高起來了。
因為第二個Ba為了與第一個Ba進行基線對齊，第二個Ba下沉了。
當父元素的font-family和子元素的font-family不同時
比如下面代碼
```
<style>
p {
line-height: 200px;
}
span {
font-family: Catamaran;
font-size: 100px;
}
</style>
<p>
<span>Ba</span>
</p>
```
的渲染效果

為什么會這樣？
這是因為瀏覽器進行計算時，會以每行line-box的一個零寬度字符開始，這一規范稱為strut。
零寬度字符的行間距大小，是以父元素為準。
所以這個p

4. 什么是vertical-align

vertic-align有四個值，其中
vertical-align：top/bottom對齊到父節點的line-box的頂部或底部
vertical-align：text-top /text-bottom對齊到自身的content-area的頂部或底部
如圖

注意垂直對齊是以行間距區域開始。如圖