Android、IOS文字居中偏离的解决方案

时间 2020-08-10

原文原文链接

前言

移动端开发，常常会遇到的问题，就是文字居中。通常都只能往css方向去fix这个问题。
本身之前也用过position:relative;top:-*px的方式去解决。🌚
后来才发现，原来不是css的问题，是浏览器在渲染象形文字时，就已经错误了。
本文参考自知乎回答，用来总结如何填上这个坑～css

1、css文字居中

先总结下，前端开发中，经常使用的文字居中技巧。html

常规方法

height:20px;
line-height:20px;

table-cell方式

<p class="text-wrap">
    <span class="text">文字居中</span>
</p>

.text-wrap{
    display:table;
}
.text{
    display:table-cell;
    vertical-align:middle;
}

position方式

<p class="text-wrap">
    <span class="text">文字居中</span>
</p>

.text-wrap{
    position:relative;
    height:20px; /* 必须设置一个高度，通常取文字高度 。由于内容abs定位后，高度为0*/
}
.text{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

flex方式

<p class="text-wrap">
    <span class="text">文字居中</span>
</p>

.text-wrap{
    display:flex;
    justify-content:center; /* 左右居中 */
    align-items:center; /* 上下居中 */
}

2、为何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到中文字体。前端

3、解决方案

1.针对Android 7.0+设备：<html>上设置 lang 属性：<html lang="zh-cmn-Hans">，同时font-family不指定英文。web

比较经常使用的是设置font-family: sans-serif 。浏览器

这个方法是利用了浏览器的字体fallback机制，让英文也使用中文字体来展现。blink早期的内核在fallback机制上存在问题，Android 7.0+才能ok，早期的内核下会致使英文fallback到Noto Sans Myanmar，这个字体很是丑。字体

2.针对MIUI 8.0+设备：设置font-family: miui。flex

这个方案就是显式申明中文的方案，MIUI在8.0+上内置了小米兰亭，同时在fonts.xml里给这个字体指定了family name：miui，因此咱们能够直接设置。ui

另外，腾讯的IMWeb团队也给出了解决方案，但亲测，治标不治本。仍是上述方案较为完美地解决。spa

参考

[1] Android浏览器下line-height垂直居中为何会偏离 -- 周祺回答 [2] Android 浏览器文本垂直居中问题 -- IMWeb解决方案code