移动端解决文字不居中问题

在写移动端的时候遇见一个大坑

带背景颜色的文字显示，常见的垂直居中方法如下：

  .text{
    height: 26px;
    line-height: 26px;
    padding: 0 7px;
    font-size: 20px;
    color: #dc2f2f;
    background: #ffeded;
    border-radius: 3px;
  }

设置height等于line-height就可以实现文字在背景高度下居中。

在移动端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。

转载于:https://www.cnblogs.com/moxiaohan/p/10571550.html