@font-face y renderizado de texto en Chrome Windows

21/sep/2012 5

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;

Ver ejemplo 1

Solución 2: -webkit-text-stroke-width

-webkit-text-stroke-width: 0.6px;

Ver ejemplo 2

Solución 3: -webkit-font-smoothing

-webkit-font-smoothing: antialiased;

Ver ejemplo 3

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).

Ver ejemplo 4

Links

Comentarios

  1. Agustín Amenabar [#]

    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.

  2. George Doe [#]

    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.

  3. George Doe [#]

    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.

  4. Mario Gonzales [#]

    Tengo un problema funciona bien pero cuando el texto ingresa con un fade aparece primero deformado.

  5. Jorge Epuñan [#]

    mario: como estas haciendo el fade? con JS? intentalo con CSS3 mejor a traves de opacity.

Responder a George Doe ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab