浏览器的字体大小差异很大

Question

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

Chrome / WebKit和Firefox有不同的渲染引擎，它们以不同的方式呈现字体，特别是具有不同的尺寸。这并不太令人惊讶，但令人惊讶的是一些差异的程度。

我总是可以将页面上的各个元素调整得更相似，但至少可以说这很乏味。我一直在寻找更系统的解决方案，但许多资源（例如SO答案）只是说“使用重置包”。虽然我确定这会修复一些其他的东西，如填充和间距，但它似乎对字体尺寸没有任何影响。

例如，如果我从http://html5reset.org/获取重置包，我可以显示相当大的差异（请注意检查器中显示的布局尺寸）。 [下面的图片实际上比在此答案中显示/调整大小更高 - 例如在Chrome中，您可以右键单击并在新标签中打开图像。]

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

使用Helvetica，Chrome的高度会更短。

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

使用different font，Chrome再次呈现更高的字体，但另外字母间距变得混乱（可能是由于字体的粗体化）：

<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>

如果我们尝试按照注释的建议撒上无单位* { line-height: 1; }，我们会看到虽然它确实产生相同的高度，但垂直偏移量与页面上的其他元素不同：

我尝试了一些重置/规范化包无济于事。我只想在这里确认这确实是生活中的事实（甚至省略了IE和移动设备等更明显的违法者），我也不会错过一些非常棒的解决方案。

Answer 1

对line-height（或BODY）元素使用无单位HTML：

BODY {line-height: 1.25; }

Answer 2

在pt中使用字体网站，而不是font-size:12pt