跨浏览器的字体大小不一 [英] Very different font sizes across browsers

问题描述

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

Chrome / WebKit和Firefox具有不同的渲染引擎，它们渲染字体的方式不同，特别是尺寸不同。这并不令人感到意外，但令人惊讶的是一些差异的大小。

我总是可以调整页面上的单个元素，使其更加相似，但这是单调乏味，至少可以说。我一直在寻找更系统的解决方案，但许多资源（例如SO答案）只是说使用重置包。虽然我确信这可以修复一些其他的东西，例如填充和间距，但是对于字体大小来说，这似乎没有什么区别。

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

 < h1 style =font-size：64px; background-color：#eee;>文章标题< / h1> 
  

使用Helvetica，Chrome的高度会更低。 $ p> < h1 style =font-size：64px; background-color：#eee; font-family：Helvetica>文章标题< / h1>


使用

 <风格> 
 
 @ font-face {
 font-family：MyriadProRegular; 
 src：url（fonts / myriadpro-regular-webfont.eot）; 
 src：local（？），url（fonts / myriadpro-regular-webfont.woff）格式（woff），url（fonts / myriadpro-regular-webfont.ttf）格式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）格式（woff），url（fonts / myriadpro-light-webfont.ttf）格式truetype），url（fonts / myriadpro-light-webfont.svg＃webfont2SBUkD9p）格式（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）格式（woff），url（fonts / myriadpro-semibold-webfont.ttf）格式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;正如评论所建议的那样，我们看到尽管它确实产生了相同的高度，但垂直偏移量与页面上的其他元素不同：

I已经尝试了一些重置/正常化包无济于事。我只是想在这里确认一下，这确实是一个事实（甚至省略了像IE和手机这样的更加尖锐的罪犯），我不会错过一些超级好的解决方案。

<对于 BODY 使用无单位行高（解决方案）或 HTML ）元素：

BODY {line-height：1.25; }


Update: Added simple test example http://jsfiddle.net/7UhrW/1/ using normalize.css.

Chrome/WebKit and Firefox have different rendering engines which render fonts differently, in particular with differing dimensions. This isn't too surprising, but what's surprising is the magnitude of some of the differences.

I can always tweak individual elements on a page to be more similar, but that's tedious, to say the least. I've been searching for more systematic solutions, but many resources (e.g. SO answers) simply say "use a reset package." While I'm sure this fixes a bunch of other things like padding and spacing, it doesn't seem to make any difference for font dimensions.

For instance, if I take the reset package from http://html5reset.org/, I can show pretty big differences (note the layout dimensions shown in the inspectors). [The images below are actually higher res than shown/resized in this answer - eg in Chrome you can right-click and Open Image in New Tab.]

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

With Helvetica, Chrome is has the shorter height instead.

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

Using a different font, Chrome again renders a much taller font, but additionally the letter spacing goes haywire (probably due to the boldification of the font):

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

If we try to sprinkle in the unitless * { line-height: 1; }, as suggested by a comment, we see that while it does yield identical heights, the vertical offsets are different, as are other elements on the page:

I've tried a few resets/normalize packages to no avail. I just wanted to confirm here that this is indeed a fact of life (even omitting the more glaring offenders like IE and mobile) and I'm not missing some super-awesome solution to this mess.

解决方案

Use unitless line-height for BODY (or HTML) element:

BODY {line-height: 1.25; }

这篇关于跨浏览器的字体大小不一的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！