H5兼容性问题总结
文字问题
1.文字顶部被截掉，这个很坑，常见于android手机
机型：android手机，红米note4x, 小米6
原因： 文字大小和行高一样的时候，会出现这个问题
- 字体的
font-size不等于最终显示的大小，取决于字体设计师的定义，以Catamaran字体为例，当我们设置100px的字号时，大写字母的高度（Capital Height）是68px，小写字母的高度（X-Hegiht）是49px，整体的高度是164px（Ascender 1100 + Descender 540），要了解任意字体的相关属性可以使用fontforge - 我们日常使用的CSS单位em对应
font-size本身，ex对应小写字母的高度（中文字体对应的也是该字体下英文小写字母的高度） - 正因为第一点，为了不截掉文字，**最小行高的设置需要依据字体来**，以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 …
- 字体设置
移动端H5字体设置，全局可以按如下方式：
font-family: system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, sans-serif
这种方式下，不用设置lang，中英文都可以fallback到最好的字体。
位置问题
- 如果有这种fixed bar , 不要设置高度，尽量使用内部内容填充高度，或者通过padding的形式，如果直接设置高度，在下拉滚动切换position：fixed的时候，容易出现高度下移1px左右的距离，也就是fied bar下面会多出来一道线，这个问题在android容易复现。
参考文献
- 关于lang标签：https://www.growingwiththeweb.com/2014/03/languages-and-chinese-characters-on-the-web.html
- 深入了解CSS字体度量，行高和vertical-align：https://www.w3cplus.com/css/css-font-metrics-line-height-and-vertical-align.html
- the-lang-and-xml: https://www.w3.org/TR/html5/dom.html#the-lang-and-xml:lang-attributes
- 怎样区分衬线字体与无衬线字体？: https://www.zhengjie.com/question/350E5834
- 字体设计： https://fontforge.github.io/en-US/