浏览器字体大小有两个需要注意的地方,有时候会碰到兼容性的问题。
第一,是浏览器默认的字体大小是16px,所以重置css的时候将字体大小默认改为10px是这样改的:
html,body {font-size: 62.5%;}
后面设置字体大小rem,em都依据body的字体大小计算比较方便。
第二,浏览器可以识别的最小字体也是有偏差的。
比如,谷歌可以识别的最小字体大小是12px,小于12px,依然按照12px显示。其他浏览器虽然会好点,但是尽量控制最小的字体在12px。再小的可以通过字体缩放实现,或图片等方式。
考虑浏览器兼容性,可以每次设置字体大小加上line-height,给个固定值,或百分比,控制盒子高度的一致性。