在一些項目中會碰到文字和圖片無法居中越平,即使采用flex或絕對定位(top:-50%, tranform:translateY(50%)仍然無法解決频蛔。
這個問題的根本原因在于Android對大部分的非sans-serif字體支持不友好,如Helvetica秦叛,導致文字在組件內(nèi)部(如span,label)就不居中晦溪。
文字在組件內(nèi)部都不居中了,自然在外面怎么處理都是無法對齊了挣跋。
三個解決辦法:規(guī)避或局部修改字體
- 都使用圖片代替三圆。字體圖片雖然無法居中對齊,但幸運的是只有很少地方會碰到避咆。(有人會問把圖片改為字體圖標呢舟肉?沒試過,本質(zhì)是svg查库,應該不能)
- 簡化設計路媚,涉及對齊的都規(guī)避掉。如去掉圖片樊销、文字容器有上下邊框則一定要去掉
- 局部修改字體(不完美整慎,只能作最終方案),對文字的直接容器新增二個屬性, lang 和 font-family
<span lang="zh-cmn-Hans" style="font-family: -apply-system-font, sans-serif">文字</span>
但是sans-serif和helvetica字體的顏色是不一樣的围苫,所以可以增加一個透明度opacity為0.8會比較接近helvetica了裤园,故最終的方案是
<span lang="zh-cmn-Hans" style="font-family: -apply-system-font, sans-serif; opacity:0.8">文字</span>