安卓文本居中——關(guān)于css，字體和line-box的筆記

ideaa 發(fā)布于2019-08-29 13:42 / 1048人閱讀

摘要：前言本文主要探索在安卓系統(tǒng)下瀏覽器中小字號中文居中的實現(xiàn)以及在混排時的對齊處理。神奇的安卓字體根據(jù)所述，文字中從小到大可以劃出三個區(qū)域，分別是，和。但是，部分安卓機器字體的字形不居中于，卻居中于。

前言

本文主要探索在安卓系統(tǒng)下瀏覽器中小字號中文居中的實現(xiàn)以及在混排時的對齊處理。本文是受《Deep dive CSS: font metrics, line-height and vertical-align》(以下簡稱為《Deep》)所啟發(fā)，并以此為基礎(chǔ)所寫，建議先閱讀前文，您也可以選擇閱讀大漠老師或方應(yīng)杭老師的翻譯版。大漠版方應(yīng)杭版

一直以來前端最簡單的文字垂直居中方式就是line-height=height,瀏覽器會自動將line-height大于font-size的部分平分在文字上下，實現(xiàn)居中效果。但是，當(dāng)網(wǎng)頁中存在中文特別是10-12px的小字號中文時，在部分安卓機器上出現(xiàn)字符上飄，甚至超出容器的情況。
對于這種現(xiàn)象，網(wǎng)上流傳著多種解決方案，比如tabel-cell法，flex法等。但是這類方法總是時靈時不靈，原因就在于這類方法只解決了將line-box相對外層容器居中的問題，必須要配合line-height:normal實現(xiàn)文字在line-box內(nèi)居中才能解決問題。下文將對line-height:normal的生效原理和副作用處理進行研究。

神奇的安卓字體

根據(jù)《Deep》所述，文字中從小到大可以劃出三個區(qū)域，分別是em-square，content-area和virtual-area。一般情況下，前一個區(qū)域大致居中與后一個區(qū)域，而文字本身也大致居中于這個區(qū)域。因此無論是采用哪種line-height,文字居中于line-box看起來都是一件理所當(dāng)然的事。
但是，對于部分安卓系統(tǒng)的默認(rèn)字體而言卻不是這樣。

下圖的兩個字的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
下圖左側(cè)紅框內(nèi)的淡灰色區(qū)域為em-square，高10px，深灰色區(qū)域為content-area高11px，右側(cè)紅框內(nèi)的淡灰色區(qū)域為virtual-area高14px。可以看出，此時em-square位于content-area底部，字形則位于content-area頂部，所以字形完全沒有居中于ex-square。
而右側(cè)的行為則與《Deep》所述不同，virtual-area相對content-area多出來的3px大小的line-gap并不是平均分配與上下，而是全部堆在了頂部。因此恰好看起來文字居中于virtual-area。

應(yīng)用

綜上，line-height:normal可以使文字在那些奇怪的安卓機器上實現(xiàn)垂直居中。當(dāng)然，這條樣式會帶來一個問題，即高度line-box的高度不可控，此時就需要前文所說的flex或tabel-cell將line-box
相對于外層容器居中，然后在外層容器設(shè)置高度即可。

下面是使用實例，起作用的樣式是display: flex;align-items: center兩條。創(chuàng)建一個彈性容器，然后將該容器的子元素居中，這樣virtual-area多出來的部分就溢出到邊框之外，而不會影響布局了。
圖中紅框內(nèi)的淺灰色區(qū)域為高度12px的容器，深灰色為高度16px的line-box和virtual-area。最終實現(xiàn)了將12px大小的文字居中于12px大小的容器中的目的。

國

總結(jié)

回顧我們以前的做法。我們通常會為line-height設(shè)置一個具體的高度該高度就是line-box的高度。而瀏覽器會將字體的em-square居中于line-box中。對于大多數(shù)正常字體這么操作就可以實現(xiàn)垂直居中。
但是，部分安卓機器字體的字形不居中于em-square，卻居中于virtual-area。此時通過line-height:normal樣式使得virtual-area撐滿line-box。從而實現(xiàn)文字居中于line-box。最后通過固定外層容器大小然后居中l(wèi)ine-box的方式，消除前面的樣式造成的line-box大小不可控的副作用。

PS:這種方案應(yīng)用于多行文本的時，無法手動控制行間距，只能使用字體設(shè)計師決定的默認(rèn)行間距。在需要手動控制行間距時，還是建議放棄此方案，反正對于多行文本，1~2px的偏移對整體視覺展現(xiàn)不會有太大的影響
。