问题
在开发的时候遇到的一个问题: 移动端安卓手机上使用 line-height 属性, 让它的值等于 height, 结果发现是不居中的, 统一的都有向上偏移的趋势.
css 这样写的.
|
|
原因
是 Android 在排版计算的时候参考了 primyfont 字体的相关属性(即 HHead Ascent、HHead Descent 等),而 primyfont 的查找是看font-family
里哪个字体在 fonts.xml 里第一个匹配上,而原生 Android 下中文字体是没有 family name 的,导致匹配上的始终不是中文字体,所以解决这个问题就要在font-family
里显式申明中文,或者通过什么方法保证所有字符都 fallback 到中文字体。
解决
针对 Android 7.0+设备:
<html>
上设置 lang 属性:<html lang="zh-cmn-Hans">
,同时 font-family 不指定英文,如font-family: sans-serif
。这个方法是利用了浏览器的字体 fallback 机制,让英文也使用中文字体来展示,blink 早期的内核在 fallback 机制上存在问题,Android 7.0+
才能 ok,早期的内核下会导致英文 fallback 到 Noto Sans Myanmar,这个字体非常丑。针对 MIUI 8.0+设备:
设置font-family: miui
。这个方案就是显式申明中文的方案,MIUI 在 8.0+上内置了小米兰亭,同时在 fonts.xml 里给这个字体指定了family name:miui
,所以我们可以直接设置。添加 border 相关属性:
|
|
后来的 CSS
|
|