ACTUALIZACIÓN Agosto 2020
Ya no es necesario orientar a Safari con una consulta de medios para habilitar el suavizado de fuentes de subpíxeles. El valor predeterminado está bien.
Sin embargo , a pesar de que utiliza los subpíxeles suavizado de fuentes por defecto, hay una significativa mosca en la sopa en Chrome suavizado de fuentes, para cualquiera que busque una representación coherente del texto .
- Esta es la representación de Chrome de texto claro sobre un fondo oscuro
- Esta es la representación de Chrome de texto oscuro sobre un fondo claro
Mira el tamaño del todo en la letra e de arriba. El texto claro sobre un fondo oscuro se representa con un peso perceptiblemente más pesado que el texto oscuro sobre un fondo claro (con un estilo de fuente CSS idéntico).
Una solución, para los sitios que respetan la configuración del tema oscuro / claro del usuario, es apuntar a Chrome con una consulta de medios que se limita al modo oscuro y cambiarlo a suavizado sin subpíxeles de la siguiente manera:
@media screen
and (-webkit-min-device-pixel-ratio: 0)
and (min-resolution: 0.001dpcm)
and (prefers-color-scheme: dark) {
body {
-webkit-font-smoothing: antialiased;
}
}
El resultado :
Un peso de texto mucho más consistente independientemente de si se procesa claro sobre oscuro o oscuro sobre claro.
Vea la comparación lado a lado de antes y después:
-
ACTUALIZACIÓN Mayo 2018
-webkit-font-smoothing: subpixel-antialiasedahora no tiene ningún efecto en Chrome pero en Safari todavía mejora mucho las cosas PERO SOLO EN RETINA. Sin él, en Safari en las pantallas de retina, el texto es delgado e insípido, mientras que con él, el texto tiene el peso adecuado. Pero si usa esto en pantallas que no son retina en Safari, (especialmente en valores livianos) el texto es un desastre. Recomiendo encarecidamente utilizar una consulta de medios:
@media screen and (-webkit-min-device-pixel-ratio: 2) {
body {
-webkit-font-smoothing: subpixel-antialiased;
}
}
La configuración explícita -webkit-font-smoothing: subpixel-antialiasedes la mejor solución actual si desea evitar al menos parcialmente el texto antialiased más delgado.
--tl; dr--
Tanto con Safari como con Chrome, donde la representación de fuente predeterminada usa subpíxeles-antialiasing, cualquier CSS que fuerce la representación basada en GPU, como las sugerencias anteriores para usar una transformación usando translateZ o incluso solo una transición de escala, hará que Safari y Chrome "se rindan automáticamente "en el suavizado de fuentes con suavizado de subpíxeles y, en su lugar, cambie a texto solo con suavizado, que se ve mucho más claro y delgado, especialmente en Safari.
Otras respuestas se han centrado en mantener una representación constante simplemente estableciendo o forzando el suavizado de fuentes al texto con suavizado más delgado. En mi opinión, el uso de translateZ o backface hidden degrada significativamente la calidad de la representación del texto y la mejor solución si desea que el texto se mantenga consistente y está de acuerdo con el texto más delgado es solo para usar -webkit-font-smoothing: antialiased. Sin embargo, la configuración explícita en -webkit-font-smoothing: subpixel-antialiasedrealidad tiene algún efecto: el texto aún cambia ligeramente y es visiblemente más delgado durante las transiciones renderizadas en la GPU, pero no tan delgado como sería sin esta configuración. Por lo tanto, parece que esto evita, al menos parcialmente, el cambio a texto sin suavizado.