2020年8月更新
サブピクセル フォント スムージングを有効にするために、メディア クエリで Safari をターゲットにする必要がなくなりました。デフォルトで問題ありません。
ただし、デフォルトでサブピクセル フォント スムージングを使用していますが、テキストの一貫したレンダリングを探している人にとっては、Chrome のフォント スムージングの軟膏には大きな違いがあります。
- これは、暗い背景に明るいテキストを表示した Chrome のレンダリングです。
- これは、明るい背景に暗いテキストを表示した Chrome のレンダリングです。
上の文字 e の全体の大きさを見てください。暗い背景の明るいテキストは、明るい背景の暗いテキストよりもかなり重いウェイトでレンダリングされます (同じ CSS フォント スタイルを使用)。
ユーザーのダーク/ライト テーマ設定を尊重するサイトの 1 つの解決策は、ダーク モードに限定されたメディア クエリを使用して Chrome をターゲットにし、次のように非サブピクセル スムージングに切り替えることです。
@media screen
and (-webkit-min-device-pixel-ratio: 0)
and (min-resolution: 0.001dpcm)
and (prefers-color-scheme: dark) {
body {
-webkit-font-smoothing: antialiased;
}
}
結果 ：
明暗をレンダリングするか、明暗をレンダリングするかに関係なく、はるかに一貫したテキストの重み。
前と後の横並びの比較をチェックしてください：
--
2018 年 5 月の更新
-webkit-font-smoothing: subpixel-antialiasedChromeでは効果がありませんが、Safariではまだ大幅に改善されていますが、RETINAでのみ. Retina スクリーンの Safari でこれがないと、テキストは薄くて味気ないものになりますが、これがあると、テキストは適切な重みを持ちます。ただし、これを Safari の Retina 以外のディスプレイで使用すると (特に軽量値で)、テキストは大惨事になります。media-query を使用することを強くお勧めします:
@media screen and (-webkit-min-device-pixel-ratio: 2) {
body {
-webkit-font-smoothing: subpixel-antialiased;
}
}
-webkit-font-smoothing: subpixel-antialiasedアンチエイリアス処理された薄いテキストを少なくとも部分的に回避したい場合は、明示的に設定することが現在の最善の解決策です。
--tl;dr--
デフォルトのフォント レンダリングでサブピクセル アンチエイリアシングを使用する Safari と Chrome の両方で、GPU ベースのレンダリングを強制する CSS は、translateZ を使用したトランスフォームを使用したり、単にスケール遷移を使用したりする上記の提案のように、Safari と Chrome が自動的に「あきらめる」原因になります。サブピクセルでアンチエイリアス処理されたフォント スムージングの代わりに、アンチエイリアス処理されたテキストのみに切り替えます。これは、特に Safari では、より明るく、より薄く見えます。
他の回答は、単純にアンチエイリアス処理された薄いテキストにフォント スムージングを設定または強制することで、一定のレンダリングを維持することに重点を置いています。私の目には、translateZ または backface hidden を使用すると、テキスト レンダリングの品質が大幅に低下します。テキストの一貫性を維持したい場合の最良の解決策は、より薄いテキストを使用することだけ-webkit-font-smoothing: antialiasedです。ただし、明示的に設定すると、-webkit-font-smoothing: subpixel-antialiased実際にはある程度の効果があります。テキストはまだわずかに変化し、GPU でレンダリングされたトランジション中に目に見えて薄くなりますが、この設定がない場合ほど薄くはなりません。したがって、これにより、アンチエイリアス処理されたストレート テキストへの切り替えが少なくとも部分的に妨げられているように見えます。