2012-10-28 34 views
5

私は私のウェブサイトのためのCSSファイルに次のように持っている:上、しかしすべてのブラウザで正しくフォントを表示するにはどうすればよいですか?

http://i.imgur.com/mywDZ.png

:サイトは、私はそれ好きな方法を探してフォントを持っている私のMac上のSafariで

body { 
font-family: Georgia, "Times New Roman", serif; 
font-size: 1.125em; 
line-height: 1.5em; 
} 

IEとChrome上記のように見えないフォントを中にWindowsコンピュータは、以下を参照してください。

http://i.imgur.com/aL0vi.jpg

私の質問は、上記のスクリーンショット#1のように、すべてのOSのすべてのブラウザでフォントが同じに見えるようにするにはどうすればいいですか?

ご協力いただきありがとうございます。

答えて

5

これはフォートスムージングの問題で、ブラウザとは異なり、フォントを同じ方法で「読み取る」ことはありません。

ここでは、プロセスを説明する記事、Font smoothing explainedです。

、ここでCSSはあなたがどこでも同じ結果を得るために試すことができますハックです:

html, html a { 
    -webkit-font-smoothing: antialiased; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004); 
} 

さらに読書:4.2 Font smoothing: the 'font-smooth' property in the CSS 3 fonts module specs from the W3C

+0

リンク先のW3Cドキュメントは、2002年の旧式のドラフトです。現在のドラフトhttp://www.w3.org/TR/css3-fonts/には、フォントのスムージングについては何もありません。 –

+0

CSSのハックは明らかにMacのWebKitブラウザでしか動作せず、最後に読んだことによると、「アンチエイリアス」の値は現在サポートされていません。いずれにしても、Windows上でのレンダリングではハックはまったく役に立ちません。 –

0

Windowsはその貧弱なフォントスムージングのために有名です。 1つの確かな、クロスブラウザの代替はあなたのコンテンツ全体を.png画像で置き換えています(.jpgはテキストにひどい傾向があります)。もちろん、これは実行可能な選択肢ではないため、すべてのブラウザがfont-smoothingプロパティをサポートするまで(上記のように)、あなたは現在の状況に固執しています。

2

使用するフォントのバリエーションをテストし、おそらくフォントの選択肢を再考することはできますが、何もできません。いくつかのフォントは、違いによって多くの影響を受けます。

異なるプラットフォームでは、ブラウザによっては、フォントが異なるようにレンダリングされることがあります。例えば、 A Closer Look At Font Rendering

レンダリングは、システムやブラウザの設定によっても異なる場合があります。通常のテキストでスタイルシートをテストすると、Windowsで見られるのはあなたのスクリーンショットとはまったく異なります。

関連する問題