2012-06-25 10 views
6

he encontrado una fuente abierta me ha gustado (Crete Round) y diseñado algunas pantallas en Photoshop con él. Cuando llegó el momento de configurar el CSS, traté de usar Google Fonts y el "kit" descargable de fontsquirrel.com (un archivo zip con cuatro tipos diferentes de fuentes y una hoja de estilo ya hecha), pero ambos me dieron resultados extraños en Mac .@ font-face dando un peso ultra-pesado de la fuente y/o malo suavizado

Photoshop — Lo que quiero que se vea como:

enter image description here

Yuck — Chrome (y Safari) en Mac usando un kit de @ font-face de fontsquirrel.com:

enter image description here

Chrome (y Safari) en Mac usando Fuentes de Google (básicamente idéntica):

enter image description here

BUENA — Chrome en Windows (fontsquirrel):

enter image description here

BUENA — Hack. Descubrí que con cualquier opacidad (no texto en color alpha) inferior a 1,0, Chrome me dio buenos resultados

Chrome en Mac usando fontsquirrel, con opacity:0.999; (pero Safari todavía era malo.):

enter image description here

¿alguien tiene alguna idea de lo que está pasando aquí, o lo que podría estar haciendo mal?

+0

El peor me resulta el carácter "i", sólo se muestra adecuadamente para la mayoría de tipos de letra en particular, la dimensión (llena el espacio entre el punto y la línea de lo que parece "l") . – Marty

+0

Simplemente curioso si font-smooth: siempre ayuda. –

+0

@AshwinSingh parece que la fuente suave nunca cambia nada. – Nicole

Respuesta

1

No creo que está haciendo algo mal. Tampoco creo que haya una forma de evitarlo, que no sea usar imágenes en lugar de texto, donde el estilo es absolutamente crucial.

Encontré THIS LINK que analiza los motores de renderizado en diferentes sistemas operativos (teniendo también en cuenta diferentes navegadores).

Espero que esto ayude!

1

tratar

html { -webkit-font-smoothing: antialiased; }

+0

Parece ser el predeterminado ... –

+0

También podría agregar *, html, body {-webkit-font-smoothing: antialiased; } para afectar a todos los elementos. [Explicado más aquí] (http://maxvoltar.com/archive/-webkit-font-smoothing) – Brett

Cuestiones relacionadas