3

プロジェクトで HelveticaNeue-CondensedBold フォントを使用しています。iOSに搭載されているフォントです。これを Chrome、Safari、および Firefox で表示すると、何らかの理由で不要なボールドまたはダブル フォント効果が発生します。

今日、私はそれをちょっと修正する方法を見つけましたが、それがフォント レンダリングのバグなのか確信が持てませんでしたか?

以下の私の例は、不透明度なしのフォント、.9999999 に設定された不透明度 (フォントが通常のように見える)、および不透明度が 8 桁に設定されたフォント (元の二重太字のように見える) を示しています。

.noOpacity {
    opacity:1;
}
.opacity7digits {
    opacity: .9999999;
}
.opacity8digits {
    opacity: .99999999;
}

ここに画像の説明を入力

ここに画像の説明を入力

なぜこれが起こっているのか、私は困惑しています。

http://jsfiddle.net/J75gW/4/

4

1 に答える 1

4

OSX は、サブピクセル アンチエイリアス処理されたテキストを他のプラットフォームよりもかなり重くレンダリングします。これは、暗い背景に明るい色のフォントを使用する場合に特に当てはまります。黒い背景に白いテキストがあるため、この効果が最も極端な状態になっていることがわかります。

これはバグですか？私はそうは思いません。これは、Apple によるサブピクセル フォント レンダリングの不適切な実装にすぎません。推測にすぎませんが、サブピクセル レンダリングに完全に対応したとは思えません。

  • 低 DPI の非 Retina iPhone/iPod/iPad でさえ、モバイル デバイスで使用したことはありません。iOS でこの効果が見られないのはそのためです。

  • また、Apple 以外の外部モニターの OSX でサブピクセル アンチエイリアシングを有効にしていません (または、マウンテン ライオンでこれを確認していません)。有効にするには、ターミナルでコマンドを実行する必要があります。おそらくこれは、非常に少数の LCD モニターが赤-緑-青のサブピクセル順序を持たないためであり、サブピクセル レンダリングが台無しになる可能性があります。

  • apple.com のすべてで-webkit-font-smoothingがantialiasedに設定されています。

不透明度 vs. -webkit-font-smoothing: アンチエイリアス

不透明度を .9999 (または 1 以外) に変更するとフォントが細くなる理由は、不透明でないテキストは通常​​、サブピクセル アンチエイリアシングではなく単純なアンチエイリアシングでレンダリングされるためです。-webkit-font-smoothing: antialiasedを使用して同じ効果を得ることができます(それをサポートするブラウザーで)。

証拠が欲しい？元のスクリーンショットを極端にクローズアップしたものをご覧ください。.9999999 テキストの周りに色付きのフリンジがないことに注意してください。これは、テキストがサブピクセル アンチエイリアシングを使用していないことを示しています。

ここに画像の説明を入力

とにかく、OSX ブラウザーで非常に重いテキストを扱うか、 -webkit-font-smoothing: antialiased を使用する必要があると思います(Firefox ではまったく同じようにレンダリングされないことを受け入れてください)。不透明度はハックであり、将来的に機能しなくなる可能性があります。

于 2012-11-14T01:25:34.160 に答える