web-dev-qa-db-ja.com

Firefoxでのフォントスムージング

Google WebFonts（この場合は「Oswald」）を使用して、フォントが本来よりも太字にレンダリングされていることがわかりました。私は以下を使用してWebkitベースのブラウザでこの問題を解決しました：

-webkit-font-smoothing: antialiased;

しかし、Firefoxでは、これを制御する宣言が見つかりません。これを修正するためにtext-shadowハックを使用することを聞いたことがありますが、フォントの幾何学的プロパティが間違いなく変更されるため、これは使用したくないと思います。

Webkit（Chrome）では次のようになります。

Chrome looks good

これはFirefoxのおかげでブロック状の恐ろしいレンダリングです：

Firefox ugly

このフォントはfont-combinator.comで見つけ、Firefoxを使用してfont-combinatorで正しくレンダリングされるため、FireFoxでこれを実現する方法があることはわかっています。 font-combinator.comを介したFirefoxでの表示は次のとおりです。

on Font-combinator.com using firefox

Font-combinatorの作成に使用されたcssを参照した後、次の宣言が見つかりました：text-rendering: optimizelegibility;ですが、これを要素に適用すると機能しません。

私も試しました：

text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smooth: never;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;

Firefoxにフォントのアンチエイリアスを適用して、表示時に正しく表示されるようにするにはどうすればよいですか？ www.font-combinator.comで、宣言、または宣言を正しく表示するための宣言の組み合わせを見つけることができますか？

このマシンには古いバージョンのOSXがインストールされているため、比較的古いバージョンのFireFox（16.0.2）を使用しています。

cssmacosfirefoxfontsrendering
10
Nick Bewley

これはOSX上のFirefoxの問題のみです...

私はちょうどこの質問に答えました： FirefoxでSVGテキストをアンチエイリアスする方法 あなたの問題から可能な解決策を使って。

次の属性を使用できると思います。

-moz-osx-font-smoothing: grayscale;

これはfirefox25でリリースされます（ナイトリービルドは http://nightly.mozilla.org/ にあります）

35
Tieme

「通常」または「太字」だけでなく、数値のフォントの太さを宣言してみましたか？異なるブラウザでのWebフォントのレンダリングには多くの違いがあります。

通常のテキストには{font-weight：400;}を、太字には{font-weight：700;}を設定してみてください。

1
BraMKJ