更新: 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やモバイルなどのより明白な犯罪者を省略している場合でも)、この混乱に対するいくつかの非常に優れた解決策を見逃していないことを確認したかっただけです。