web-dev-qa-db-ja.com

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

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

different font stretch

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

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

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

cssfirefoxgoogle-chrome
14
Goro

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

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

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

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

14
Nick

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

5
paulmorriss

誰かがこれに出くわした場合、私にとって問題はletter-spacingでした。 ChromeとFirefoxはプロパティを異なる方法で処理します。

私の問題は、letter-spacingが他の要素の位置に影響していたことでした。具体的には、ナビゲーションメニューのいくつかの画像。プロパティを削除することで、私の問題は即座に解決されました。

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

2
Mike

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

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

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

0
Jack

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

0
Alan Hughes

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

を使用して：

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

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

Webkitのスタイルを削除し、他のブラウザー用にそのままにしておくことにしました。今は元気です。

0
Andy

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

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

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

0
Kevin Chadwick

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

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