fuente Jagged en Windows - Chrome y Safari

Question

estoy usando fuentes personalizadas en mi página web usando el siguiente código:

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

Esto funciona bien en todos los navegadores en Mac pero mirando en PC en Chrome y Safari parece irregular. ¿Hay alguna solución que pueda usar para que todo se vea igual? A continuación se muestra la diferencia (Mac a la izquierda, PC a la derecha, ambos en Chrome).

Answer 1

@ font-face fonts en PC generalmente se ven un poco más sobrio, pero 'Hinting' las fuentes mejorará la legibilidad.

Intente ejecutar sus fuentes a través del convertidor de ardilla de fuente, que puede procesar las sugerencias como parte de la conversión.

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

Como nota al margen que había también no usar @ font-face para Helvética, y sólo se basan en la gente que tiene la fuente instalada, cayendo de nuevo a Arial. No es la combinación más cercana, pero le dará el mejor resultado.

Answer 2

sí hay. Use una alternativa como cufon para fuentes suaves.

Answer 3

No estoy seguro de qué sistema operativo está utilizando, pero es posible que necesite habilitar ClearType para fuentes de pantalla.

En XP: vaya al panel de control de pantalla , y seleccione la ficha Apariencia . Desde allí, haga clic en Efectos. Seleccione Utilice el siguiente método para suavizar los bordes del tipo de letra de la pantalla y luego seleccione ClearType en la lista.

Eso me ha solucionado el problema en el pasado.

Answer 4

Esta es una diferencia fundamental entre cómo Windows y OS X manejan la representación de fuente, por lo que es poco lo que puede hacer. Una corrección hacky para Chrome está agregando una sombra paralela casi invisible (text-shadow: rgba(0, 0, 0, .01) 0 0 1px) que lo fuerza a antialias del texto. Servicios como Typekit están trabajando arduamente para solucionar el problema, como serving fonts as Postscript outlines, pero eso no ayuda mucho a su problema.

Answer 5

Usted puede tratar de:

-webkit-transform: rotate(-0.0000000001deg); 

Esto hace girar el elemento sólo lo suficiente para hacer que el navegador la hacen suavizado. No sé lo que hace para el rendimiento, pero no noté ninguna diferencia en el rendimiento.

solución encontrada aquí: https://twitter.com/#!/komejo/statuses/117241707522818048

Answer 6

Parece Chrome no le gusta el SVG que se llamará pasado en la declaración font-face CSS @. Añadir esto después de su @ font-face {...} en el CSS:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @font-face { 
    font-family: 'HelveticaNeueBold'; 
    src: url('fonts/HelveticaNeueBold.svg') format('svg'); 
    } 
} 

La consulta se dirige a @media navegadores WebKit y les dice a utilizar exclusivamente el archivo .SVG. En mi experiencia, esto mejora el renderizado en Windows Chrome.

PRECAUCIÓN: Esta reparación podría causar otro problema en Chrome para Windows 7 u 8, que he encontrado en algunas ocasiones: la utilización de esta corrección a veces impide el ajuste de palabras en Chrome en Windows. Un comportamiento muy extraño que solo ocurre a veces y no he encontrado una solución para. Una pregunta acerca de esto se ha publicado aquí:

Strange word length issue when using font-face in Chrome

Answer 7

Esto parece hacer el truco:

html { 
    -webkit-text-stroke-width: .10px; 
}