css中字体大小在不同浏览器兼容性问题

css中使用font-size设定字体大小，不同浏览器的字体height一样，但是width不同，比如在火狐和谷歌中，font-size：20px,字体的高度变为20px，但是谷歌的字体宽度比火狐长

一，解决方法如下：

1、 将浏览器的基准字号设置为 62.5%，也就是 10px，现在 1rem = 10px —— 为了计算方便。然后 在 body上应用 font-size: 2rem;，那么现在body的字体大小就是 20px。

html { font-size: 62.5%; }
body { font-size: 2rem; /* =20px */ }

 

2、webkit浏览器渲染出来的字体具有一定的平滑效果，所以我们会看到 chrome 渲染出来的字体要大一点并且宽一点,可添加如下内容：

body { 
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; 
} 

启用浏览器的默认平滑字体效果css：

body {
 -webkit-font-smoothing: subpixel-antialiased;
 -moz-osx-font-smoothing: auto; 
}

设置Chrome下，设置小于12px字体，显示仍为12px

-webkit-text-size-adjust:none;