栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

line-height设置垂直居中,但是在Android的浏览器上总会偏上一点的解决办法

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

line-height设置垂直居中,但是在Android的浏览器上总会偏上一点的解决办法

line-height设置垂直居中,但是在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到中文字体。

2个解决方案:
  1. 不考虑向下兼容, (针对Android 7.0及以上设备):上设置 lang 属性:,同时font-family不指定英文,如 font-family: sans-serif 。这个方法是利用了浏览器的字体fallback机制,让英文也使用中文字体来展示,blink早期的内核在fallback机制上存在问题,Android 7.0+才能ok,早期的内核下会导致英文fallback到Noto Sans Myanmar,这个字体非常丑。

  2. 对安卓设备进行针对性的微调:判断设备是不是安卓,如果是加入特殊类名,通过类名加大行高,把文字拉下来:

  • html

  • js

  • css

靳肖健 jxjweb.top
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/242133.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号