UPDATE August 2020
Sie müssen Safari nicht mehr mit einer Medienabfrage ansprechen, um die Glättung von Subpixel-Schriftarten zu aktivieren. Der Standardwert ist in Ordnung.
Jedoch , obwohl es Subpixel - Schriftglättung standardmäßig verwendet, gibt es eine signifikante Fliege in der Salbe in Chrome Schriftglättung, für alle , die eine Suche konsistenten Darstellung von Text .
- Dies ist Chrome's Rendering von hellem Text auf dunklem Hintergrund
- Dies ist Chrome's Rendering von dunklem Text auf hellem Hintergrund
Schauen Sie sich die Größe des Ganzen im obigen Buchstaben e an. Der helle Text auf dunklem Hintergrund wird mit einer spürbar höheren Gewichtung gerendert als der dunkle Text auf hellem Hintergrund (mit identischem CSS-Schriftstil).
Eine Lösung für Websites, die die Dunkel / Hell-Themeneinstellung des Benutzers berücksichtigen, besteht darin, Chrome mit einer Medienabfrage anzusprechen, die auf den Dunkelmodus beschränkt ist, und diese wie folgt auf Nicht-Subpixel-Glättung umzustellen:
@media screen
and (-webkit-min-device-pixel-ratio: 0)
and (min-resolution: 0.001dpcm)
and (prefers-color-scheme: dark) {
body {
-webkit-font-smoothing: antialiased;
}
}
Das Ergebnis :
Eine weitaus gleichmäßigere Textgewichtung, unabhängig davon, ob Licht auf Dunkel oder Dunkel auf Licht gerendert wird.
Schauen Sie sich den direkten Vergleich von vorher und nachher an:
- -
UPDATE Mai 2018
-webkit-font-smoothing: subpixel-antialiasedhat jetzt keine Wirkung in Chrome, aber in Safari verbessert es die Dinge noch sehr, ABER NUR AUF RETINA. Ohne es in Safari auf Retina-Bildschirmen ist Text dünn und fade, während Text damit das richtige Gewicht hat. Wenn Sie dies jedoch auf Nicht-Retina-Displays in Safari verwenden (insbesondere bei geringen Gewichtswerten), ist Text eine Katastrophe. Es wird dringend empfohlen, eine Medienabfrage zu verwenden:
@media screen and (-webkit-min-device-pixel-ratio: 2) {
body {
-webkit-font-smoothing: subpixel-antialiased;
}
}
Die explizite Einstellung -webkit-font-smoothing: subpixel-antialiasedist die derzeit beste Lösung, wenn Sie den dünneren Antialias-Text zumindest teilweise vermeiden möchten.
--tl; dr--
Sowohl in Safari als auch in Chrome, wo das Standard-Rendering von Schriftarten Subpixel-Antialiasing verwendet, führt jedes CSS, das GPU-basiertes Rendering erzwingt, wie die obigen Vorschläge, eine Transformation mit translateZ oder sogar nur einen Skalierungsübergang zu verwenden, dazu, dass Safari und Chrome automatisch "aufgeben" "Bei der Glättung von Subpixel-Antialiasing-Schriftarten wechseln Sie stattdessen zu nur Antialiasing-Text, der vor allem auf Safari viel heller und dünner aussieht.
Andere Antworten konzentrierten sich auf die Aufrechterhaltung eines konstanten Renderings, indem einfach die Schriftglättung auf den dünneren Antiailias-Text eingestellt oder erzwungen wurde. Meines Erachtens verschlechtert die Verwendung von translateZ oder der verborgenen Rückseite die Qualität der Textwiedergabe erheblich. Die beste Lösung, wenn der Text nur konsistent bleiben soll und Sie mit dem dünneren Text einverstanden sind, ist nur die Verwendung -webkit-font-smoothing: antialiased. Die explizite Einstellung hat -webkit-font-smoothing: subpixel-antialiasedjedoch tatsächlich einige Auswirkungen - der Text ändert sich immer noch geringfügig und ist bei Übergängen, die auf der GPU gerendert werden, sichtbar dünner, aber nicht so dünn wie ohne diese Einstellung. Es sieht also so aus, als würde dies zumindest teilweise die Umstellung auf geraden Antiailias-Text verhindern.