css中字体大小设定对不同浏览器产生不同结果

Question

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

Answer 1

大致解决方法是这样的：

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

csshtml {
  font-size: 62.5%;
}

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

2、 webkit浏览器渲染出来的字体具有一定的平滑效果，所以我们会看到 chrome 渲染出来的字体要大一点并且宽一点，我们可以通过下边的方法来关闭；

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

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

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