移動端解決文字不居中問題

在寫移動端的時候遇見一個大坑

帶背景顏色的文字顯示，常見的垂直居中方法如下：

  .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。