¿Por qué el texto html a veces parece distorsionado al visualizarlo en Chrome o Safari en Windows?

Ocasionalmente, los usuarios informan que el texto en https://squareup.com parece un galimatías (o incomprensible) para ellos … sin embargo, no hemos podido reproducir esto.

Los usuarios informan que usan Chrome o Safari en Windows, por lo que esto puede ser un problema con webkit.

Aquí hay tres capturas de pantalla que se han tomado de esto en https://squareup.com :

Ejemplo 1

ejemplo 2

ejemplo 3

La página de precios en nuestro sitio actual:

ejemplo 4

Se recrea fácilmente mediante el uso de una versión anterior de Windows, así como una twig más antigua de Chrome. Parece que Chrome 4-8 tiene este problema. Para fines de prueba, arranque en XP con Chrome 4. El problema radica en el text-rendering: optimizelegibility . Esta es una falla reportada en versiones anteriores de Chrome cuando se usa optimizelegibility con @font-face cuando se usan fonts woff. Si puede reproducir el problema, intente eliminar vertical-align: baseline y vea si la representación aún está distorsionada.

Puede ser algo relacionado con la encoding de caracteres. Intente especificar explícitamente la encoding al poner esto en el de la página:

  

es una puñalada en la oscuridad, pero ¿ha pensado en volver a generar los archivos @fontface, en caso de que exista alguna forma de corrupción que solo surja cuando se ve en ciertas versiones del navegador WebKit?

Si tiene uno, intente ejecutar un archivo TTF a través del generador FontSquirrel fontface:

http://www.fontsquirrel.com/fontface/generator

Tal vez es las fonts personalizadas actuando? Cuando veo su sitio en firefox dice que está en Helvetica Neue pero en Chrome dice ag1, agb

No tengo una respuesta segura para ti, pero parece que estás usando la clase Modernizr y mirando tu nodo html en Chrome, tiene la clase de letra de fuente js aplicada, lo que sugiere problemas personalizados de la fuente.

es probable que tengan el tipo claro desactivado. http://www.microsoft.com/typography/cleartype/tuner/step1.aspx

Me parece que los textos en cuestión tienen text-shadow aplicada a ellos. Esto es bastante sofisticado, experimental, exigente, poco confiable, con poco o ningún valor visual (por ejemplo, sombras blancas sobre un fondo blanco).

Hay una respuesta simple a esto: su código CSS se representa antes del procesamiento del lado del servidor. Apuesto a que está usando algún tipo de css php o repository para servir su estilo / css / markup / jquery o fuente externa para esa página.

Te sugiero que ingreses algunos estados de espera y compruebe el proceso de publicación o revises tus métodos de ajax / xajax. 🙂

Espero que eso ayude.

Tuve el mismo problema y descubrí que el problema era con el font-face. Entre los múltiples fonts fuente, la segunda preferencia era “svg”, la cambiada a truetype resolvió el problema.