同样line-height下ios和Android显示不一致的问题

最新推荐文章于 2024-01-15 15:47:03 发布

原创

最新推荐文章于 2024-01-15 15:47:03 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #icon和文字对不齐 #line-height安卓问题 #ios与Android不一致

在设置相同line-height时，iOS与Android设备上文字与图标居中显示存在差异，Android会显得偏高。问题源于Android排版计算参考了非中文字体属性。解决方案包括在Android 7.0+设备上通过设置lang属性，针对MIUI 8.0+设备设置特定字体，以及尝试避免使用奇数行高和字体大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

当我们设置文字垂直居中时，一般会设置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: sans-serif 。这个方法是利用了浏览器的字体fallback机制，让英文也使用中文字体来展示，blink早期的内核在fallback机制上存在问题，Android 7.0+才能ok，早期的内核下会导