La fuente cargada en Windows se ve muy mal. ¿Qué fuentes estás usando que rinden mejor?

EDITAR : El problema era que no tenía "Cleartype" activado en mi configuración en Vista. Esta pregunta puede no tener mucho significado si tiene Cleartype instalado / habilitado en el sistema operativo Windows.

Un nuevo viento tipográfico ha llegado a la web, con la propiedad de fuente de CSS3 para poder cargar fuentes que no sean el sistema operativo / sistema. Mi Mac renderiza muchos perfectamente mientras que mi máquina Windows no. ¿Qué conjunto de fuentes debo usar para que funcione mejor en Windows?

Esto es similar a una pregunta sobre Stack Overflow.

Y aquí un ejemplo de un sitio web que se ve mal en PC con Myriad Pro: http://css-tricks.com/

NOTA: No estoy hablando de la diferencia en antialiasing entre las versiones del navegador (como entre IE9 e IE6).

Espero como respuesta a sus pruebas, una lista de fuentes más el tamaño (use px) que se vean bien, o al menos de una manera que puedan usarse para textos cortos o títulos pequeños.

Por ejemplo, en este momento "League Gothic, 30px" tiene el siguiente aspecto:

Esto debería ser un comentario (por lo tanto, hacer este CW), pero creo que hay algunos malentendidos y suposiciones erróneas en la pregunta. Como obviamente desea que se responda esta pregunta (después de todo, ha ofrecido una recompensa), aquí están mis dos centavos.

Según su captura de pantalla, me parece que ha configurado su Windows para que renderice las fuentes regularmente (a diferencia de la representación de subpíxeles) y probablemente su navegador no realice ningún antialiasing (podría, pero luego desaparece con la compresión JPG).

Los siguientes ejemplos relacionados con Windows son de XP Pro SP 3, por lo que es bastante seguro asumir que la situación está al menos en el mismo nivel en Vista y 7.

Windows tiene (en XP) opciones para usar ClearType o no. Sin ClearType, las fuentes se representan como en la captura de pantalla. Esta es una imagen muy ampliada del cuadro de diálogo de Windows sin CT:

Verás que es una operación binaria: el píxel es negro o transparente. Ahora con algunos navegadores modernos, incluso sin CT, hacen algunos anti-aliasing. Esto es de css-tricks.com con Windows XP y Chrome 8 y CT está APAGADO (como estaba en la imagen anterior):

¿Ves lo que ha pasado? Probablemente ya lo haya hecho, como lo indicó en su pregunta.

NOTA: No estoy hablando de la diferencia de antialiasing que hay entre los nuevos navegadores y los antiguos (como entre IE9 e IE6).

Ahora, el ClearType !

Aquí está exactamente el mismo texto del cuadro de diálogo de Windows, esta vez con CT:

Si le interesa en qué se basa esto, consulte el artículo de Wikipedia sobre representación de subpíxeles . ¿Y activar el ClearType afecta la representación del navegador? El mismo "otro" texto con Windows XP y Chrome 8 y ClearType está activado:

¡Lo hace! Y mientras lo hacemos, podría agregar que (al menos) IE 8 usa la representación ClearType incluso si está deshabilitado en el nivel de Windows.

Comparar el texto con antialias y ClearTyped en 100% no es tan radical como comparar el texto con ClearTyped con el texto sin antialias. Sin embargo, es notablemente más audaz:

aa: CT:

Para ver cómo se ve eso sin antialiasing, solo mira la captura de pantalla de littlemad .

Y para comparar, aquí está el mismo "otro" en el renderizado predeterminado de OS X: aún más audaz que ClearType.

Para responder a su pregunta: cualquier fuente . Si su sistema operativo representa la fuente de manera diferente, podría deberse a que ha configurado su sistema operativo para que así lo haga . O puede ser que su navegador no sea capaz de suavizar o ClearType.

Otra pregunta sería por qué algunas fuentes se representan correctamente y otras no, si este es el caso (pero no veo ningún problema en el sitio que ha mencionado en Windows). ¿O está pidiendo fuentes que se vean adecuadas sin ningún tipo de renderizado?

Y aquí también está la respuesta a la pregunta frecuente: "Sí, sé todo eso, ¿por qué ClearType se ve diferente de la representación de OS X?

Porque son diferentes La representación de subpíxeles no es algo fácil de implementar. ClearType es la marca registrada de Microsoft y está protegida con 10 patentes (+ 1 pendiente; ver wikipedia ). Simplemente no pueden ser lo mismo.

Si el problema es el mismo que el de la pregunta de Stackoverflow a la que hace referencia, ¿no es la misma respuesta también?

Eso es un problema indirecto .

Cuando genera su kit de fuente de fuente (como en FontSquirrel), debe especificar Sugerencias en las opciones de experto.

Elija Experto y, en Representación, seleccione:

Aplicar sugerencias: mejora la representación de Win.

ttfautohint se puede usar para reconstruir el código de bytes de sugerencia de la fuente; la configuración predeterminada (compatible con GDI) debería ayudar a Windows a representar la fuente.

Esto no tiene nada que ver con el navegador, sino el propio Windows.

* los sistemas nix (unix / linux y OSX se incluyen en esto porque tiene una base Unix) tienen la opción de controlar con precisión la forma en que se muestra el texto, y generalmente están configurados para la representación de subpíxeles (que tiene una explicación mucho más técnica que la que yo tengo) te lo voy a dar, pero esencialmente usa los subpíxeles (las partes roja, verde y azul de los píxeles de tu pantalla) para representar el texto) donde Windows usa cleartype, que es su propio tipo de representación que soy un poco difusa en la mecánica.

Básicamente es solo que Windows no renderiza subpíxeles, no son las fuentes o los archivos, sino el sistema operativo que muestra esas fuentes y archivos.

Activar ClearType en su Windows XP:

1) Siga estas instrucciones: http://blogs.msdn.com/b/virtual_pc_guy/archive/2011/10/05/enabling-cleartype-on-windows-xp-mode.aspx

2) Ahora, siga esto en su IExplorer: http://www.microsoft.com/typography/cleartype/tuner/step1.aspx

Usa el siguiente código en CSS

-webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

Podría ayudarte