人类的境遇

原文地址:https://segmentfault.com/a/1190000021557598
作者:Fw恶龙
本文首发于:思否

1. 需求

  • 使用line-height垂直居中单行文字;
  • 使用伪元素vertical-align: middle;来垂直居中图片;

2. 遇到的坑

在安卓手机上用以上方法垂直居中的文字及图片都偏上。

3. 问题

导致这个问题的本质原因可能是 Android 在排版计算的时候参考了primyfont字体的相关属性(即HHead Ascent、HHead Descent等),而primyfont的查找是看font-family里哪个字体在fonts.xml里第一个匹配上,而原生Android下中文字体是没有family name的,导致匹配上的始终不是中文字体,所以解决这个问题就要在font-family里显式申明中文,或者通过什么方法保证所有字符都fallback到中文字体。

4. 解决

为 html 标签添加 lang="zh-CN" 属性,该属性值只针对中文页面,外文页面设置其他对应属性值。可用安卓手机查看以下栗子复现:

CodePen

参考链接


Fw恶龙
276 声望46 粉丝

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视。