soft - ¿Es seguro usar la regla CSS "text-rendering: optimizelegibility;" en todo el texto?
improve text rendering css (6)
Acabo de corregir un error por el que Chrome se negaba a procesar fuentes web (siempre se trataba de una fuente no web, sin ninguna razón que pudiéramos discernir). Al final, después de una considerable cantidad de arañazos en la cabeza, el problema se solucionó configurando text-rendering de optimizeLegibility (que había sido establecido por Twitter Bootstrap, por lo que vale) en auto .
Entonces, por el momento, diría que la respuesta es "no". Lo cual no quiere decir que no lo use, pero no lo aplique a todo. Úselo donde sea necesario y pruébelo con cuidado por rarezas o efectos inesperados (¡especialmente en Chrome!).
Noté que este tema woo, por ejemplo, lo ha establecido en la etiqueta HTML y, por lo tanto, todo el texto del sitio lo tiene configurado. Leí que puede causar problemas de rendimiento, pero eso fue hace un tiempo. Algunas personas sugirieron solo agregarlo a encabezados y texto grande.
Han cambiado las reglas ahora? ¿Los navegadores funcionan bien con él?
La traducción de texto CSS parece inestable. En lugar de perder tiempo con una propiedad pobre de CSS, puede valer la pena ir con esto ...
Si Javascript es una opción para ti, Kerning.js parece prometedor, un acercamiento de javascript a kerning y kerning pares alojados en Github.
También vale la pena señalar, si te estás tomando en serio la tipografía, hay fuentes web de Font Squirrel gratuitas.
de la página de text-rendering MDN, actualizada por última vez el 18:27, 29 de abril de 2012 , dice:
La propiedad de CSS de renderizado de texto proporciona información al motor de renderizado sobre qué optimizar para cuando se renderiza texto. El navegador realiza intercambios entre velocidad, legibilidad y precisión geométrica. La propiedad de representación de texto es una propiedad SVG que no está definida en ningún estándar de CSS. Sin embargo, los navegadores Gecko y WebKit le permiten aplicar esta propiedad al contenido HTML y XML en Windows, Mac OS X y Linux.
lo que nos indica que no está definido en ningún estándar de CSS, lo que da lugar a problemas entre navegadores, como se ve en la tabla de compatibilidad del navegador .
Por defecto
El navegador realiza conjeturas sobre cuándo optimizar la velocidad, la legibilidad y la precisión geométrica al dibujar texto.
Entonces, es seguro asumir que la mejor opción es dejar que el navegador se encargue de detalles como este, ya que esta característica no es un estándar ( todavía ), y la mayoría de los navegadores no la admiten.
el uso de "text-rendering: optimizelegibility" también provoca errores de representación en el navegador nativo de Android (4.2 y 4.3). Si usa este atributo en combinación con la carga de nuevas fuentes a través de @ font-face , la fuente no se mostrará en absoluto (solo retroceso). sin "text-rendering: optimizelegibility" y @ font-face la fuente carga y se muestra como se esperaba.
text-rendering: optimizeLegibility; fue utilizado en una de nuestras aplicaciones web. se procesó correctamente en todos los navegadores, excepto uno - chrome (64) en Windows 7.
Tuve que eliminar la propiedad ya que la mayoría de nuestros usuarios finales pertenecían a esa categoría.
No: ha habido muchos errores a lo largo de los años en varias plataformas que hacen que el texto no se muestre o se visualice incorrectamente (ver a continuación). Si su objetivo es habilitar ligaduras, en realidad hay una propiedad estándar font-variant-ligatures definida en CSS Fonts Level 3 que ofrece control total:
font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
Consulte font-variant de font-variant para ver otras características tipográficas que se pueden habilitar, como mayúsculas, letras alternativas, etc.
Historia
Antes de que font-variant-ligatures y las propiedades relacionadas se agregaran, la antigua propiedad font-feature-settings permitía habilitar la misma característica. Esta es una interfaz de nivel inferior y ya no se recomienda, excepto para habilitar las características de OpenType que no tienen una interfaz de nivel superior.
http://blog.fontdeck.com/post/15777165734/opentype-1 tiene un ejemplo simple:
h1 {
-webkit-font-feature-settings: "liga", "dlig";
-moz-font-feature-settings: "liga=1, dlig=1";
-ms-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";
}
http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature/ tiene más discusión también.
Galería de errores
El popular proyecto HTML5 Boilerplate lo eliminó hace dos años debido a varios problemas de renderizado:
https://github.com/h5bp/html5-boilerplate/issues/78
Dos errores de Chromium que acabo de arreglar esta mañana provocaron que Chrome 21 en Windows XP no realizara ninguna sustitución de fuente, mostrando el símbolo de carácter faltante en lugar de usar uno de una fuente diferente, y mostrando texto superponiéndose incorrectamente a otros elementos:
http://code.google.com/p/chromium/issues/detail?id=114719
http://code.google.com/p/chromium/issues/detail?id=149548
Vea http://aestheticallyloyal.com/public/optimize-legibility/ para algunas otras preocupaciones.
http://bocoup.com/weblog/text-rendering/ problemas de compatibilidad destacados en Android y problemas generales de rendimiento