目前移動端在項目使用的rem,安卓手機上line-height屬性,讓它的值等於height,結果發現是不居中的。
出現此問題的原因是Android在排版計算的時候參考了primyfont字體的相關屬性(即HHead Ascent、HHead Descent等),而primyfont的查找是看`font-family`里哪個字體在fonts.xml里第一個匹配上,而原生Android下中文字體是沒有family name的,導致匹配上的始終不是中文字體,所以解決這個問題就要在`font-family`里顯式申明中文,或者通過什么方法保證所有字符都fallback到中文字體。
解決方法:
1、添加border相關屬性:
- border: 1px solid transparent;
2、針對Android 7.0+設備:
- <html>上設置 lang 屬性:<html lang="zh-cmn-Hans">,同時font-family不指定英文,如 font-family: sans-serif 。這個方法是利用了瀏覽器的字體fallback機制,讓英文也使用中文字體來展示,blink早期的內核在fallback機制上存在問題,Android 7.0+才能ok,早期的內核下會導致英文fallback到Noto Sans Myanmar,這個字體非常丑。
3、針對MIUI 8.0+設備:
- 設置 font-family: miui 。這個方案就是顯式申明中文的方案,MIUI在8.0+上內置了小米蘭亭,同時在fonts.xml里給這個字體指定了family name:miui,所以我們可以直接設置。