安卓文本居中——關於css，字體和line-box的筆記

前言

本文主要探索在安卓系統下瀏覽器中小字號中文居中的實現以及在混排時的對齊處理。本文是受《Deep dive CSS: font metrics, line-height and vertical-align》(如下簡稱爲《Deep》)所啓發，並以此爲基礎所寫，建議先閱讀前文，您也能夠選擇閱讀大漠老師或方應杭老師的翻譯版。大漠版 方應杭版

一直以來前端最簡單的文字垂直居中方式就是line-height=height,瀏覽器會自動將line-height大於font-size的部分平分在文字上下，實現居中效果。可是，當網頁中存在中文特別是10-12px的小字號中文時，在部分安卓機器上出現字符上飄，甚至超出容器的狀況。
對於這種現象，網上流傳着多種解決方案，好比tabel-cell法，flex法等。可是這類方法老是時靈時不靈，緣由就在於這類方法只解決了將line-box相對外層容器居中的問題，必需要配合line-height:normal實現文字在line-box內居中才能解決問題。下文將對line-height:normal的生效原理和反作用處理進行研究。

神奇的安卓字體

根據《Deep》所述，文字中從小到大能夠劃出三個區域，分別是em-square，content-area和virtual-area。通常狀況下，前一個區域大體居中與後一個區域，而文字自己也大體居中於這個區域。所以不管是採用哪一種line-height,文字居中於line-box看起來都是一件理所固然的事。
可是，對於部分安卓系統的默認字體而言卻不是這樣。

下圖的兩個字的font-size和height都是10px，左邊一個line-height爲1即等於font-size，右邊一個則爲normal(因爲DPR的緣由，這裏看到的像素點是實際上的三倍)。因爲line-height屬性不一樣。左邊的line-box大小等於ex-square，右邊的line-box大小等於virtual-area=content-area+line-gap
下圖左側紅框內的淡灰色區域爲em-square，高10px，深灰色區域爲content-area高11px，右側紅框內的淡灰色區域爲virtual-area高14px。能夠看出，此時em-square位於content-area底部，字形則位於content-area頂部，因此字形徹底沒有居中於ex-square。
而右側的行爲則與《Deep》所述不一樣，virtual-area相對content-area多出來的3px大小的line-gap並非平均分配與上下，而是所有堆在了頂部。所以剛好看起來文字居中於virtual-area。

應用

綜上，line-height:normal可使文字在那些奇怪的安卓機器上實現垂直居中。固然，這條樣式會帶來一個問題，即高度line-box的高度不可控，此時就須要前文所說的flex或tabel-cell將line-box
相對於外層容器居中，而後在外層容器設置高度便可。

下面是使用實例，起做用的樣式是display: flex;align-items: center兩條。建立一個彈性容器，而後將該容器的子元素居中，這樣virtual-area多出來的部分就溢出到邊框以外，而不會影響佈局了。
圖中紅框內的淺灰色區域爲高度12px的容器，深灰色爲高度16px的line-box和virtual-area。最終實現了將12px大小的文字居中於12px大小的容器中的目的。

<span style="border:1px solid red;height:12px;font-size:12px;color: black;display: flex;align-items: center;">國</span>

總結

回顧咱們之前的作法。咱們一般會爲line-height設置一個具體的高度該高度就是line-box的高度。而瀏覽器會將字體的em-square居中於line-box中。對於大多數正常字體這麼操做就能夠實現垂直居中。
可是，部分安卓機器字體的字形不居中於em-square，卻居中於virtual-area。此時經過line-height:normal樣式使得virtual-area撐滿line-box。從而實現文字居中於line-box。最後經過固定外層容器大小而後居中line-box的方式，消除前面的樣式形成的line-box大小不可控的反作用。

PS:這種方案應用於多行文本的時，沒法手動控制行間距，只能使用字體設計師決定的默認行間距。在須要手動控制行間距時，仍是建議放棄此方案，反正對於多行文本，1~2px的偏移對總體視覺展示不會有太大的影響
。