Este es un bug molesto, donde a partir de algunas tipografías (generalmente de palo seco y delgadas) tienen un pobre renderizado en Chrome en Windows. Buscando una solución me deparo con 4 diferentes; finalmente solo la solución 2 me resulta efectiva pero las dejo todas ya que puede variar con el tipo de tipografía y las propiedades que tenga el texto con problemas:
En Chrome Windows
En Chrome MacOS X
Solución 1: text-shadow
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;Solución 2: -webkit-text-stroke-width
-webkit-text-stroke-width: 0.6px;Solución 3: -webkit-font-smoothing
-webkit-font-smoothing: antialiased;Solución 4: Orden en el llamado de los formatos
Si utilizas una herramienta para conversión de fuentes para web como FontSquirrel probablemente te entregue la solución final ya lista para su uso, pero algunos aconsejan comenzar con definir SVG (que es un formato vectorial de tipografías, por lo tanto no debiera deformarse) y seguido el resto de los otros formatos (.eot, .woff, .ttf).
Comentarios
La primera técnica yo la uso para Chrome en Win XP, pues funciona perfecto y la verdad es que con casi cualquier color de background te va a funcionar y se sigue viendo bien en todos los otros navegadores. Pero NO funciona en windows 7.
Así que para variar habrá que probar las otras alternativas que das y cual se ve menos mal en Mac con qué tipografía, porque el _hinting_ cambia de font en font.
Hay unas webfont tan bien hechas que casi no necesitan antialias en Chrome (Museo).
Súper buenos datos, gtracias! haré las pruebas correspondientes.
Me vino de 10 la opción “-webkit-text-stroke-width: 0.6px;”. Gracias. Tenía problemas con las fuentes de iconos de Font-Awesome en W7.
Miento, si lo aplico al todo el body se ve mal la tipografía, y si la aplico solo a los i podría ser, pero sacrificaría esa etiqueta. Lo mejor sería aplicar una clase con esa solución a cada etiqueta que use para los iconos. Lastima. Los demás no me funcionaron.
Tengo un problema funciona bien pero cuando el texto ingresa con un fade aparece primero deformado.
mario: como estas haciendo el fade? con JS? intentalo con CSS3 mejor a traves de opacity.