安卓移動端line-height垂直居中出現偏移的解決方法


目前移動端在項目使用的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,所以我們可以直接設置。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM