@font-face y renderizado de texto en Chrome Windows

21/Sep/2012 303

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. modafinilandalcohol [#]

    provigil and alcohol modafinil pill

  2. buy accutane [#]

    accutane before and after accutune

  3. buymodafinil [#]

    modafinil otc modafinil prescription

CSSLab