问题:
当我们设置文字垂直居中时,一般会设置line-heigh于box的高度一致,这是我们很难看出有什么差别。当我们设置icon和文字同时上下居中时,同样的line-height,会发现ios和Android显示不一致,Android会显得偏高
原因:
这个问题通过css是无法解决的,即使解决了也是一种通过微调来实现的hack方法,因为文字在content-area内部渲染的时候已经偏移了,而css的居中方案都是控制的整个content-area的居中。导致这个问题的本质原因可能是Android在排版计算的时候参考了primyfont字体的相关属性(即HHead Ascent、HHead Descent等),而primyfont的查找是看font-family
里哪个字体在fonts.xml里第一个匹配上,而原生Android下中文字体是没有family name的,导致匹配上的始终不是中文字体,所以解决这个问题就要在font-family
里显式申明中文,或者通过什么方法保证所有字符都fallback到中文字体。
解决方法
1.针对Android 7.0+设备:
1.1<html>
上设置 lang 属性:
<html lang="zh-cmn-Hans">
,同时font-family
不指定英文,如 font-family: