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到中文字體。前端