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

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>

使用不同的字体,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-heightfor BODY(或HTML) 元素：

BODY {line-height: 1.25; }