行高 line-height 对布局影响


在css框架中经常可以看到以下代码(全局行高), 计算方式 16 x 1.5 = 24;

body {
    font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif;
}
body {
    font-size: 14px;
    line-height: 1.42858; // 20px
}

// 常计算 字体*行高
body {
    font-size: 16px;
    line-height: 1.5; // 24px
}
			

原因一

由于设置了字体列表, 游览器选取的字体不同, 字体自身占用的行高不同. 字体的行高不定, 造成布局像素级别的异常.

需要注意文字行高与字体大小并不相等!

CSS文档里说line-height的默认值为normal,给normal的推荐设置值为1.0到1.2之间。相当于如果设置了字体的大小而不设置line-height,那么行高默认就为字体的1.0-1.2之间的一个倍数。

normalize.css中就设置了html的line-height为1.15;
原因:
有人发现相同字体与大小的文字在不同环境中line-height的值是不一致的,接着, 就有人在crossbrowsertesting上做了个测试,得出的结论就是这个问题的的确确存在,而且差异还特别大 最终,由于大部分的行高都为115px,所以,为了解决不同环境中相同字体与字号的文字行高不一致的问题,推荐设置默认line-height为1.15

如果发现多个游览器上的定位或布局, 出现1px+的偏移或差距. 是由于游览器在字体列表中采用的字体不同. 同时游览器默认没有设置行高.