FirefoxとChromeではフォントの表示が異なります

FirefoxのメニューバーはChromeとは異なるフォントストレッチで表示されているようです。以下を参照してください。

この要素に適用されるCSSは次のとおりです。

font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;

そのフォントに関するすべてがまったく同じであると言えますが、それでも表示が異なります（写真を参照）。どうして？

ChromeはWebKitレンダリングエンジンを使用します。FirefoxはGeckoエンジンを使用します。IE9 +およびOperaで使用されているDirectXおよびVegaグラフィックエンジンと同様に、タイプの解釈と表示はわずかに異なります。

ブラウザに強制的にテキストを同じように表示させることはできませんが、ナビゲーションがブラウザ間で同じ幅を占めるようにするためにいくつかのことを行うことができます。

1. ナビゲーションバーの要素には、タイプではなく画像またはSVGを使用します。これは、ナビゲーションエリアが頻繁に変更される可能性が低い場合に役立つことがあります。例：www.apple.com

2. CSSで各ナビゲーション要素の幅を修正します。テキストサイズはブラウザによって異なり<li>ますが、ナビゲーション領域の各要素に固定ピクセル幅を指定すると、各リンクの境界ボックスはブラウザ間で非常に似たものになり、ナビゲーション領域の合計幅は同じになります。

異なるブラウザ間（および異なるオペレーティングシステム上）でのフォントレンダリングの違いは、現実です。フォントが異なる幅で表示される場合でも、デザインで対処できることを確認する必要があります。

誰かがこれに出くわした場合、私にとって問題はでしたletter-spacing。ChromeとFirefoxは、プロパティの扱いが異なります。

私の問題は、letter-spacing他の要素の位置に影響を与えることでした。特にnavメニューのいくつかの画像。プロパティを削除することで、私の問題は即座に解決されました。

また、 .point値を使用すると、2つのブラウザー間で変更効果が生じる可能性があることも読んでいます。

ここに記載されている同じ問題の種類

あなたはCSSをリセットすることができます

http://developer.yahoo.com/yui/reset/ いくつかの手がかりが得られることを願って

Webkitはフォントサイズのpxをサポートしていることがわかりましたが、emを使用しない場合、文字間隔などの場合はそれらをすべて無視します。

2つのOSで6つのブラウザー/ 4レンダリングエンジンをテストした後。ほとんどの場合、行間隔があっても同じであることがわかりました。WindowsとLinuxの違いをすぐに調べます。

Palatinoフォントはどこでも利用できると思いましたが、クロムはわずかに小さいローマの時代に戻りました。

とにかく、時間romanを指定する場合、または@fontfaceを使用してフォントファイルを指定する場合！あなたはあなたのナビゲーションバーをより滑らかにすることができるかもしれません;-)

私は同様の問題を抱えていて、解決策を見つけました：

を使用して：

font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;

Firefoxでは、見栄えがいいです。Chromeでは、文字の間隔が奇妙でした。を削除するoptimizelegibilityスタイルを、トリックが行われました。両方のブラウザが同じようにレンダリングされるようになりました。

Webkitのスタイルを削除し、他のブラウザー用にそのままにしておくことにしました。今は問題ありません。

私はOpen-Sansで同様の問題を抱えていました。

-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;