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でのみです。Safariの網膜画面にそれがないとテキストは薄くて無味乾燥ですが、それがあるとテキストは適切な重みを持ちます。しかし、SafariのRetinaディスプレイ以外でこれを使用する場合（特に軽量の値で）、テキストは大惨事になります。メディアクエリの使用を強くお勧めします：
@media screen and (-webkit-min-device-pixel-ratio: 2) {
body {
-webkit-font-smoothing: subpixel-antialiased;
}
}
-webkit-font-smoothing: subpixel-antialiased薄いアンチエイリアステキストを少なくとも部分的に回避したい場合は、明示的に設定することが現在の最善の解決策です。
--tl; dr--
デフォルトのフォントレンダリングがサブピクセルアンチエイリアスを使用するSafariとChromeの両方で、上記の提案のように、translateZを使用した変換、または単にスケール遷移を使用するようにGPUベースのレンダリングを強制するCSSを使用すると、SafariとChromeは自動的に「あきらめます」 「サブピクセルアンチエイリアスフォントスムージングでは、代わりにアンチエイリアステキストのみに切り替えます。これは、特にSafariで、はるかに明るく薄く見えます。
他の応答は、フォントスムージングをより薄いアンチエイリアステキストに設定または強制することによって、一定のレンダリングを維持することに焦点を合わせています。私の目には、translateZまたはbackface hiddenを使用すると、テキストレンダリングの品質が大幅に低下します-webkit-font-smoothing: antialiased。テキストの一貫性を維持し、薄いテキストで問題がない場合は、を使用するのが最善の解決策です。ただし、明示的に設定すると、-webkit-font-smoothing: subpixel-antialiased実際にはある程度の効果があります。テキストはわずかに変化し、GPUでレンダリングされたトランジション中には目に見えて薄くなりますが、この設定がない場合ほど薄くはなりません。したがって、これは少なくとも部分的に、まっすぐなアンチエイリアステキストへの切り替えを妨げるように見えます。