4

fonts.comフォント（特にAvenir）に問題があります。私は彼らにこの問題について尋ねようとしましたが、彼らはそれを再現することができませんでした。

これらの2つの画像は、異なるサイトを除いて、同じCSSの同じテキストです。

Fonts.com：

Fonts.comレンダリング

私のサイト：

私のサイトのレンダリング

これはMacのChromeにあります。Firefoxはそれほど悪くはありませんが、それでも少し厚いです。IEでまだテストしていませんが、同じ問題が発生することはないと思います。

では、これを引き起こしているのは何ですか？同じブラウザ/OSで動作が異なるのはなぜですか？

4

2 に答える 2

12

OSXでのサブピクセルアンチエイリアスは、フォントをかなり太字に見せることができます。それがここでの問題のようです。

あなたが投稿したテキストのこの爆破されたショットを見てください：

ここに画像の説明を入力してください

あなたのテキストの周りにその色の縁取りが見えますか？これはサブピクセルアンチエイリアスです。

あなたができることはCSSを使ってそれをオフにすることです：

.yourtext {
  -webkit-font-smoothing: antialiased;
}

-webkitベンダープレフィックスからわかるように、これはSafariとChromeでのみ機能します。Firefox for OSXでサブピクセルアンチエイリアスを無効にするハックっぽい方法がありますが（のようにopacity: .99）、それが良いアイデアかどうかはわかりません。

Fonts.comがこれを認識していないことに少し驚いています。特に、サブピクセルのアンチエイリアスを無効にしているためです。

于 2013-01-08T19:33:10.683 に答える
0

また、Chris Herbertが説明したようにフォントのアンチエイリアスを設定しても問題が解決しない場合は、でフォントを宣言するときに、の代わりに@font-face...値を設定していることを確認してください。私の場合は最もうまくいくようですが、他のすべての結果は同じフェイクボールドタイプになります。font-weightfont-weight: normal;font-weight: 600;

于 2014-07-23T00:32:25.900 に答える