移动端文字不居中问题(试解决方案)

文章2020-05-15666 人已阅来源:网络

在移动端ios跟安卓下却显示出垂直文字不居中。

因为文字在content-area内部渲染的时候就已经偏移。css的居中方案都是用来控制整个content-area的居中而已,对content-area内部不会产生实质性的影响。
导致这个问题的本质原因可能是Android在排版计算的时候参考了primyfont字体的相关属性(即HHead Ascent、HHead Descent等)。

primyfont字体的确定,是依据font-family里哪个字体在fonts.xml里第一个匹配上。

原生Android下中文字体是没有family name的,导致匹配上的字体始终不是中文字体。所以渲染的时候出现偏差。

那么,解决这个问题就要在font-family里显式申明中文,或者通过什么方法保证所有字符都fallback到中文字体。

解决这个问题的比较常用的是设置font-family: sans-serif

针对MIUI 8.0+设备:设置font-family: miui

经过测试在安卓微信小程序上效果还不错。但是H5上效果就不行了。实际上字号越小越不太好处理。头疼的很....

以前也有写过一篇文章:移动端android上line-height不居中的问题。在一定程度通过非正常手段倒也可以实现,但毕竟适用场景有限。

目前知道影响的有:

  • line-height的值
  • 字号与行高的奇偶数
  • padding值的大小和奇偶
  • 字体的影响(这篇文章)

网上的文章千奇百怪,应该暂时还没有完美的解决方案,大家不必再去搜索了。忍受这些bug吧