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


27

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:

ingrese la descripción de la imagen aquí


¿Puede proporcionar más detalles: en qué navegadores no funciona bien? ¿Puedes mostrar algunos ejemplos de capturas de pantalla? Puede haber un problema básico subyacente con el renderizado aquí en lugar de un problema de fuente
Pekka admite GoFundMonica el

2
No es solo cuestión de navegador, sino de sistema operativo. Windows tiene una representación de las fuentes que es diferente con respecto a las Mac Os. No tengo una Mac conmigo (solo un Ipod Touch) en este momento, y no puedo mostrar la diferencia, pero incluso en un navegador bien renderizado para antialiasing, la fuente de cara no está bien implementada para fuentes de sistema operativo no estándar. Me preguntaba (porque tengo un conjunto limitado de fuentes), qué personas están usando que no están mal representadas en la PC.
Littlemad

@Yi Jiang: Exactamente porque la cantidad de fuente es enorme y no es posible probarlo todo, o tenerlo todo, estoy preguntando cuáles son, por experiencia de todos, cuáles son las "fuentes y tamaño seguros". usar. Puedo ver que nadie ha publicado nada, y no sé si alguien publicará algo (o si trató de analizar el renderizado de fuentes en la PC), así que estoy más triste por no tener ningún comentario.
Littlemad

"tipo decente" es puramente subjetivo.
DA01

Respuestas:


18

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:

evidencia 1

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

evidencia 2

¿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: evidencia 3

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: evidencia 4

¡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: evidencia 5CT:evidencia 6

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: evidencia 7 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.


Este es un CW, así que solo edítelo si me equivoco; o agregue detalles si conoce algunos.
Jari Keinänen

2
Gran explicación koiyu, era como sospechaba, pero no podía estar seguro hasta que publicó una captura de pantalla
JamesHenare el

Tu publicación me hace dudar. Verifiqué mi configuración y recordé que cuando estaba instalando el sistema operativo Vista, reduje al mínimo todo el efecto para mejorar el rendimiento. ¿Y adivina qué? Cleartype fue deshabilitado. Soy una persona tan estúpida, perdón por la incoveniencia. Ahora las fuentes se ven mucho mejor, definitivamente legibles. Entonces, mi pregunta es más: ¿desde qué sistema operativo Cleartype no está instalado en Windows?
Littlemad

@Littlemad no hay problema :) También fue útil para mí verificar las fuentes para poder proporcionar algún tipo de respuesta en lugar de una mera opinión .
Jari Keinänen

1
@Littlemad, cleartype se introdujo por primera vez en Windows XP, aunque está desactivado de forma predeterminada. Desde Windows Vista en adelante, ahora está activado de forma predeterminada. También en Internet Explorer 7 en adelante está activado incluso si no está habilitado en todo el sistema operativo. Fuente: en.wikipedia.org/wiki/ClearType
JamesHenare

2

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.


1
No, no es lo mismo, Hinting no resuelve el problema. Ya estoy usando la solución publicada en la web sobre Font-Face que está usando Fontsquirell. Lo que estoy buscando es: incluso si no se muestra bien alguna fuente, ¿cuál parece lo suficientemente decente para usar en la PC? y en que tamaño de letra? Estoy buscando una lista de fuentes seguras en tamaño seguro. Una especie de referencia de "mejores prácticas".
Littlemad

Una práctica recomendada es no usar NINGUNA fuente web incorporada para tamaños de texto. No están optimizados para eso. Déjelos para títulos y encabezados.
DA01

1
@ DA01: Soy diseñador web, quiero diseñar y usar una buena tipografía, no puedo ignorar las fuentes, quiero saber cuáles son las aceptables para poder usar.
Littlemad

@Littlemad Soy también un diseñador web que quiere diseñar y usar una buena tipografía. Sé que la incrustación de la fuente, al menos por ahora, usa principalmente tipos de letra que no están optimizados para pequeños tamaños de texto en las pantallas. A menudo carecen de pistas y sus métricas pueden variar enormemente, causando estragos si la cara incrustada no está disponible para un usuario en particular. Usar fuentes del sistema que estén optimizadas para tamaños de texto en pantallas es usar una buena tipografía.
DA01

1
@ DAO1: Sí, tampoco soy un gran admirador de ese modelo, pero estaba tratando de señalar que es una cuestión de fuentes buenas o malas, no que las fuentes incrustadas sean intrínsecamente malas.
Russell Leggett

1

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.


0

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.


Gracias por la explicación, pero sé que el problema es Windows, pero estoy preguntando más: ¿qué tipo de fuentes probaste o usaste en tu sitio web / cliente-sitio web que estás usando y todavía pareces "bastante" decente en Windows?
Littlemad

En realidad, varía de un navegador a otro. Firefox e IE renderizarán la misma fuente de manera diferente, aunque solo sea porque uno usa EOT y el otro usa OTF / TTF / WOFF. Y ClearType también utiliza la representación de subpíxeles. Muchas personas simplemente prefieren el suavizado de fuentes de OS X a las opciones de Windows.
Calvin Huang

@Littlemad, ¿qué quieres decir con "bastante decente"? Quiero decir que me he entregado al hecho de que no funciona bien.
Esto

@ Calvin Huang: sí, sé sobre la diferencia de renderizado del navegador, pero no es el problema principal. Está relacionado con el sistema operativo. Hoy en día el navegador representa decentemente el alias de las fuentes. Windows todavía no. @DKuntz: ¿Qué quieres decir con "Windows 8"? Veo a muchas personas que usan en la página web importante la fuente, y es realmente muy feo ver que un buen diseñador haga eso. Por lo tanto, estoy buscando una solución menos malvada, aún mal presentada, pero al menos lo suficientemente decente como para no parecer un texto de Commodore 16. De lo contrario tengo que usar una solución JS para comprobar su navegador y pasar un estilo css si usted es Mac o PC
Littlemad

44
Esta explicación es incorrecta, o al menos incompleta. Windows sí hace suavizado de subpíxeles, eso es lo que es Cleartype, y ha estado allí desde XP. En comparación con OS X, Windows no representa la fuente de forma incorrecta , lo hace de manera diferente : la diferencia es subjetiva en el mejor de los casos, y encontrará personas que prefieren cómo se representan las fuentes en Windows. Además de eso, los navegadores en Windows también utilizan diferentes métodos de representación: por ejemplo, todas las fuentes en tamaños grandes en Firefox hasta 3.6 en Windows mostrarán irregularidades visibles. Esto se resuelve en la versión 4 cambiando a DirectWrite API.
Yi Jiang


0

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


2
¿Puedes mostrar mejor un código para mostrar a los lectores lo que quieres decir?
Mensch
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.