La text-renderingpropiedad en CSS le permite elegir la calidad del texto en lugar de la velocidad (o viceversa), lo que le permite ajustar la optimización al sugerirle al navegador cómo debe representar el texto en la pantalla. Dicho de otra forma en MDN:
La
text-renderingpropiedad CSS proporciona información al motor de renderizado sobre qué optimizar al renderizar texto. El navegador hace concesiones entre velocidad, legibilidad y precisión geométrica.
Puedes ver algunos ejemplos de antes / después aquí. A veces, el resultado es simplemente un mejor kerning:
Algunos archivos de fuentes contienen información adicional sobre cómo se debe representar la fuente. optimizeLegibilityhace uso de esta información y optimizeSpeedno lo hace.
Ejemplo
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Rendimiento
Cuando se dice que existe una compensación entre velocidad y precisión, no están bromeando. Puede haber importantes problemas de rendimiento a considerar. Vale la pena citar ese artículo por completo:
En realidad, existen problemas de rendimiento significativos y efectivamente fatales (como demoras en la carga de 30 segundos o más) en los dispositivos móviles cuando se usa optimizaLegibilidad para páginas largas. Aplíquelo solo si sabe cuál será la longitud máxima del texto. (Además, evite usarlo para clientes de Android, al menos en las versiones anteriores que todos todavía usan: su procesador de fuentes a menudo tiene errores muy extraños cuando este modo está habilitado).
Hice algunas pruebas con Instapaper para determinar los límites aproximados de rendimiento de OptimizeLegibility. Un artículo de 5,000 palabras en Instapaper para iOS, por ejemplo, solo usará OptimizeLegibility en dispositivos con una CPU de clase A5 o superior. Para evitar problemas en los dispositivos iOS más antiguos, no recomendaría utilizar OptimizeLegibility a ciegas e incondicionalmente en páginas de más de 1000 palabras. Y no recomendaría habilitarlo en Android en absoluto.
Es tentador hacer:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Pero ten mucho cuidado con eso, parece peligroso especialmente cuando se aplica a una página arbitraria.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | ¿Quizás después de Blink? | no | 2.3+? | 3+? |
Hay varios errores. Problema de Android con nuevas líneas. Chrome tiene varios, incluido el espaciado entre letras. Safari (y otros) por defecto optimiza la velocidad en lugar de determinar sobre la marcha.