H5兼容性问题总结

文字问题

1.文字顶部被截掉,这个很坑,常见于android手机

 

 

机型:android手机,红米note4x, 小米6
原因: 文字大小和行高一样的时候,会出现这个问题

  1. 字体的font-size不等于最终显示的大小,取决于字体设计师的定义,以Catamaran字体为例,当我们设置100px的字号时,大写字母的高度(Capital Height)是68px,小写字母的高度(X-Hegiht)是49px,整体的高度是164px(Ascender 1100 + Descender 540),要了解任意字体的相关属性可以使用(fontforge)[https://fontforge.github.io/en-US/]
  2. 我们日常使用的CSS单位em对应font-size本身,ex对应小写字母的高度(中文字体对应的也是该字体下英文小写字母的高度)
  3. 正因为第一点,为了不截掉文字,**最小行高的设置需要依据字体来**,以Arial为例,设置line-height: 1时就会造成文字被截掉的问题:
font-size: 16px;
line-height: 16px;

解决方法: 文字大小设小一点,或者增加行高,或者不设置行高或者设置行高为normal。

全局不设置行高(即保持line-height: normal),各个字体有自己特有的安全行高,iOS和Android下自带字体的安全行高是1.03~1.18。

注1:行高的计算 (100/em size) x (HHead Ascent + HHead Descent + HHead Line Gap) / 100 注2:这里的安全行高即font-family: normal所对应的行高,行高的设置需要依据字体来,95%以上的字体安全行高大于1,有些字体的安全行高甚至达到了3.378。不写死全局的行高是最保险的,写font属性时可以写normal关键字,例如:font: 12/normal …

2. 字体设置

移动端H5字体设置,全局可以按如下方式:

font-family: system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, sans-serif

这种方式下,不用设置lang,中英文都可以fallback到最好的字体。

位置问题

1. 如果有这种fixed bar , 不要设置高度,尽量使用内部内容填充高度,或者通过padding的形式,如果直接设置高度,在下拉滚动切换position:fixed的时候,容易出现高度下移1px左右的距离,也就是fied bar下面会多出来一道线,这个问题在android容易复现。

 

 

参考文献

  1. 关于lang标签:http://www.growingwiththeweb.com/2014/03/languages-and-chinese-characters-on-the-web.html
  2. 深入了解CSS字体度量,行高和vertical-align:https://www.w3cplus.com/css/css-font-metrics-line-height-and-vertical-align.html
  3. the-lang-and-xml: https://www.w3.org/TR/html5/dom.html#the-lang-and-xml:lang-attributes
  4. 怎样区分衬线字体与无衬线字体?: https://www.zhengjie.com/question/350E5834
  5. 字体设计: https://fontforge.github.io/en-US/

未经允许不得转载:皓眸大前端 » H5兼容性问题总结

赞 (3)
分享到:更多 ()

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 匿名感觉一般行高设高一点会比较好回复