前言
移动端开发,经常会遇到的问题,就是文字居中。一般都只能往css方向去fix这个问题。
自己以前也用过position:relative;top:-*px
的方式去解决。🌚
后来才发现,原来不是css的问题,是浏览器在渲染象形文字时,就已经错误了。
本文参考自知乎回答,用来总结如何填上这个坑~
一、css文字居中
先总结下,前端开发中,常用的文字居中技巧。
- 常规方法
1 | height:20px; |
- table-cell方式
1 | <p class="text-wrap"> |
1 | .text-wrap{ |
- position方式
1 | <p class="text-wrap"> |
1 | .text-wrap{ |
- flex方式
1 | <p class="text-wrap"> |
1 | .text-wrap{ |
二、为什么Android、IOS应用css居中不起效
因为文字在content-area内部渲染的时候就已经偏移。css的居中方案都是用来控制整个content-area的居中而已,对content-area内部不会产生实质性的影响。
导致这个问题的本质原因可能是Android在排版计算的时候参考了primyfont字体的相关属性(即HHead Ascent、HHead Descent等)。
primyfont字体的确定,是依据font-family
里哪个字体在fonts.xml里第一个匹配上。
原生Android下中文字体是没有family name的,导致匹配上的字体始终不是中文字体。所以渲染的时候出现偏差。
那么,解决这个问题就要在font-family
里显式申明中文,或者通过什么方法保证所有字符都fallback到中文字体。
三、解决方案
1.针对Android 7.0+设备:上设置 lang 属性:,同时font-family不指定英文。
比较常用的是设置font-family: sans-serif
。
这个方法是利用了浏览器的字体fallback机制,让英文也使用中文字体来展示。blink早期的内核在fallback机制上存在问题,Android 7.0+才能ok,早期的内核下会导致英文fallback到Noto Sans Myanmar,这个字体非常丑。
2.针对MIUI 8.0+设备:设置font-family: miui
。
这个方案就是显式申明中文的方案,MIUI在8.0+上内置了小米兰亭,同时在fonts.xml里给这个字体指定了family name:miui,所以我们可以直接设置。
另外,腾讯的IMWeb团队也给出了解决方案,但亲测,治标不治本。还是上述方案较为完美地解决。
参考
[1] Android浏览器下line-height垂直居中为什么会偏离 – 周祺回答
[2] Android 浏览器文本垂直居中问题 – IMWeb解决方案