跨浏览器非常不同的字体大小(Very different font sizes across bro

更新：增加了简单的测试，例如http://jsfiddle.net/7UhrW/1/使用normalize.css。

镀铬/ WebKit和火狐有不同的渲染引擎，渲染字体不同，尤其是具有不同的尺寸。这是不是太奇怪，但让人惊讶的是一些差的大小。

我可以随时调整页面上各个元素更相似，但这是繁琐的，至少可以这样说。我一直在寻找更系统化的解决方案，但许多资源（例如SO答案）简单地说“使用复位包。” 虽然我敢肯定，这修复了一大堆的其他东西一样边距和间距，它似乎并没有做出对字体尺寸的任何区别。

举例来说，如果我走了复位包从http://html5reset.org/ ，我可以显示相当大的差异（注意检查人员所示的布局尺寸）。 [下面的图像比显示/调整在这个答案其实更高的水库 - 比如在Chrome新标签，你可以单击鼠标右键，打开图片]

<h1 style="font-size:64px; background-color: #eee;">Article Header</h1>

随着黑体，Chrome是具有较短的高度来代替。

<h1 style="font-size:64px; background-color: #eee; font-family: Helvetica">Article Header</h1>

使用不同的字体，浏览器再次呈现一个身材高大的字体，但额外的字母间距进入疯狂（可能是由于字体的boldification）：

<style>

@font-face {
  font-family: "MyriadProRegular";
  src: url("fonts/myriadpro-regular-webfont.eot");
  src: local("?"), url("fonts/myriadpro-regular-webfont.woff") format("woff"), url("fonts/myriadpro-regular-webfont.ttf") format("truetype"), url("fonts/myriadpro-regular-webfont.svg#webfonteknRmz0m") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "MyriadProLight";
  src: url("fonts/myriadpro-light-webfont.eot");
  src: local("?"), url("fonts/myriadpro-light-webfont.woff") format("woff"), url("fonts/myriadpro-light-webfont.ttf") format("truetype"), url("fonts/myriadpro-light-webfont.svg#webfont2SBUkD9p") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "MyriadProSemibold";
  src: url("fonts/myriadpro-semibold-webfont.eot");
  src: local("?"), url("fonts/myriadpro-semibold-webfont.woff") format("woff"), url("fonts/myriadpro-semibold-webfont.ttf") format("truetype"), url("fonts/myriadpro-semibold-webfont.svg#webfontM3ufnW4Z") format("svg");
  font-weight: normal;
  font-style: normal; }

</style>

...

<h1 style="font-size:64px; background-color: #eee; font-family: Helvetica">Article Header</h1>