Chrome no representa @ font-face ttf/woff smooth

Question

Estoy usando la fuente del icono IconMoon @ font-face para un proyecto en el que estoy trabajando.

La fuente es agradable y se procesa sin problemas cuando solo se incluye la fuente .svg y/o .eot, o cuando se navega con otros navegadores como IE9. Sin embargo, cuando navegas por el sitio con Chrome e incluye el formato .ttf y/o .woff, los íconos se vuelven muy entrecortados y no presentan ningún tipo de antialiasing. ¿Hay alguna manera de decirle a Chrome que cargue el archivo .eot o .svg en lugar de .ttf o .woff?

Answer 1

tal vez esta propiedad CSS resuelve su problema:

yourSelector { 
    font-smooth: always; 
    -webkit-font-smoothing: antialiased; 
} 

Answer 2

He encontrado esto funciona para esa cuestión. No creo que la solución de fuente lisa realmente funcione.

@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('fonts/montserrat-regular-webfont.eot'); /* IE9 Compat Modes */ 
    src: url('fonts/montserrat-regular-webfont.eot?iefix') format('eot'), 
     url('fonts/montserrat-regular-webfont.ttf') format('truetype'), 
     url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'), 
     url('fonts/montserrat-regular-webfont.woff') format('woff'); 
} 

Firefox recogerá el último en la lista (woff), trabajando o no, IE utilizará EOT, y Chrome recogerá el primero que funciona (SVG). Woff trabaja también en cromo, pero causa glifos con alias, por lo que poner SVG por delante de woff soluciona. *

Esta solución funciona, pero causa una solicitud adicional en Safari, que podría dejar su SVG continuación woff igual que lo hizo originalmente y añadir:

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

leer sobre ello aquí: http://hollisterdesign.wordpress.com/2014/04/29/note-to-self-always-use-this-fix/

Answer 3

probar este pequeño giro a su fuente, la esperanza de que te ayudaré.

Ejemplo:

p{ 
    transform: rotate(-0.0000000001deg); 
} 

Answer 4

Deja url de la fuente SVG antes de que todos los demás, Chrome carga el SVG y obtendrá una buena prestación, especialmente para la fuente de luz.