css - 不同浏览器的字体大小差异很大

Question

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

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 和移动设备等更明显的违规者)并且我没有错过一些 super 棒的解决方案来解决这个问题。

Answer 1

BODY(或HTML)元素使用无单位line-height:

BODY {line-height: 1.25; }