Las fonts web se ven entrecortadas solo en Firefox

  • Sistema operativo: Win 7 64bit
  • Navegador: FF 24.0

Si voy a http://www.google.com/fonts, se ve horrible:

Problema de fuente de Firefox

Y cuando cargo uno para mi sitio localmente se ve igual de mal pero aquí está mi configuración que generé de fontsquirrel a continuación:

@font-face { font-family: 'SecretSans'; src: url('/fonts/secretsansextralight-webfont.eot'); src: url('/fonts/secretsansextralight-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/secretsansextralight-webfont.svg#secretsansttextralight') format('svg'), url('/fonts/secretsansextralight-webfont.woff') format('woff'), url('/fonts/secretsansextralight-webfont.ttf') format('truetype'); font-weight: 400; font-style: normal; } 

Debido a que se ve igual de mal en el sitio anterior y en mi propio sitio, supongo que es un problema con Firefox y / o Windows.

¿Existe una solución / configuración que funcione para todos los usuarios que accedan a mi sitio que no requiera que cambien las configuraciones dentro de Firefox o Windows, ya que eso obviamente no es realista?

EDIT1: Acabo de ir a Panel de control> Fuentes> Ajustar texto de ClearType y ahora se reproduce correctamente en Firefox … No puedo pedirle a los usuarios que hagan esto, así que espero que haya otra manera

Sé que este hilo proviene de la piedra, pero desafortunadamente el problema sigue siendo actual. Y si buscas en Google el problema de las fonts picadas, está en el top 10; ¡así que quiero agregar mis 10 centavos de experiencia con eso!

Ok: si buscas en Google problemas con las fonts en Vista / Win 7 / Win 8, en muchos casos encontrarás dos grandes grupos de problemas relacionados con ClearType. ¡No todo! Pero muchos.


Grupo 1: fonts borrosas de Windows

Si hablamos de “fonts de Windows” estamos hablando de la interfaz de usuario (menús y similares) y el “espacio de trabajo” de aplicaciones de oficina como Word o Excel. Este problema afecta a casi todas las personas que no tienen un monitor de pantalla panorámica 16: 9 que sea capaz de HD, especialmente. monitores clásicos de tipo oficina con resolución de 19 “y 1280×1024. La palabra clave es” baja-DPI “aquí.

Para aquellos que no lo sepan: ClearType hace un trabajo HORRIBLE en estos monitores de bajo DPI y procesa toda la interfaz de una manera tan borrosa que intentar trabajar con ella causa fatiga ocular masiva y dolor de cabeza. Realmente gente, ¡te da cáncer de ojo! (y no, ¡no puedes volver a crear ese problema en un monitor Full HD!)

La única salida es desactivar ClearType. Esto ayudó a casi todos los del grupo 1, incluyéndome a mí.


Grupo 2: renderización de fonts Choppy en Firefox y Chrome (raramente MSIE)

En muchos casos, como en este hilo, ClearType fue deshabilitado. Y cuando se vuelven a habilitar, los navegadores sí procesan las fonts. ¡Verdad para mí también!


Desafortunadamente … ¡cuando vuelvo a habilitar ClearType, estoy de vuelta en el grupo 1!

Por lo tanto: o bien tengo ClearType deshabilitado y puedo trabajar con Windows nítido y claro durante horas sin fatigarme los ojos, pero luego tengo que vivir con webfonts entrecortadas en FF y Chrome.

O vuelvo a habilitar ClearType para ver las fonts agradables e ingeniosas que los diseñadores han elegido para sus sitios web tan elegantes, ¡y vivir con el dolor de cabeza que Windows me da debido a las fonts borrosas! 🙁

Obviamente, voy de la primera manera. Y si me tropiezo con un sitio web donde las fonts parecen rotas, simplemente alternar el uso de webfonts con un solo clic del mouse – hay un gran complemento FF para eso.

Oh, lo olvidé: ¿Por qué parece que MSIE renderiza las fonts muy bien?

Bueno, IE (al menos 10 y 11 que yo sepa) siempre usa ClearType para renderizar una página, sin importar si está deshabilitada en la configuración del sistema o no. Por supuesto, también muestra el problema de fonts borrosas y me recuerda por qué tengo ClearType deshabilitado. Y lo dejaremos así!

Reflexiones finales: los progtwigdores creen que las webfonts son la solución final para todas sus necesidades de diseño, pensando, tienen todo bajo control probando sus cosas en un par de sistemas predeterminados. De hecho, webfonts acaba de hacer un problema bien conocido fuera de control, ¡porque no existe un usuario predeterminado!

Piénsalo.

Estoy bastante seguro de que es solo cómo lo renderiza el navegador. Especialmente con @ font-face stuff (supongo que usaste http://www.fontsquirrel.com/ o un sitio similar para generarlo). Puede usar un poco de sombra de texto para hacerlo un poco más nítido, pero por lo que ha mostrado, creo que será mejor que intente encontrar otra fuente muy similar que rinda mejor.

Esto fue obviamente porque tenía ClearType apagado. Es el método utilizado para alisar los bordes de las fonts en las pantallas de la computadora (LCD). No tiene nada que ver con el método utilizado en la página web para adjuntarlos, esto es estrictamente un problema de representación de fonts. Las fonts pueden aparecer de forma diferente según el sistema, ya que cada una tiene un método ligeramente diferente para renderizarlas: tienden a verse mejor en los sistemas Apple, mientras que Windows parece tener un método de renderizado de alguna manera inferior. Esto depende completamente del sistema que se está ejecutando, por lo que las fonts se procesarán de manera diferente para varios usuarios. Además, las fonts profesionales de grandes fundiciones generalmente rinden mucho, mucho mejor que las fonts abiertas y gratuitas, porque están corregidas específicamente para optimizar la forma en que se procesan en la pantalla, especialmente cuando se vuelven pequeñas (por debajo de 20 píxeles de tamaño), por lo que La rugosidad de las fonts del conjunto de Google Fonts también puede deberse, en parte, al hecho de que no son tan cuidadosamente elaboradas como las profesionales y costosas. Sin embargo, independientemente de la calidad de fuente, el texto siempre se verá más feo y distorsionado si el suavizado de fuente está desactivado (o no es compatible), por lo que no hay nada que pueda hacer. Dejar de usar webfonts personalizados porque le preocupa que la fracción de usuarios que tienen suavizado de fuente esté desactivado le impedirá usarlos.