Problemas de representación de fuente de Windows con @ font-face en CSS

Question

Tengo problemas con @ font-face en equipos con Windows (no importa qué navegador). Funciona bien en Linux y Osx.

Este es el código que estoy usando CSS (generada con la fuente-squirel)

Compruebe las capturas de pantalla para el problema .. Parece que hay 2 problemas

• En las ventanas de las fuentes se ' bailando'. Los no están alineados en la línea de base.
• En Windows, las fuentes no son antialias.

¿Alguien tiene una idea? Gracias por adelantado.

captura de pantalla en OSX & Linux:

http://j3rn.org/images/ob_font1.png

Captura de pantalla en Windows:

http://j3rn.org/images/ob_font2.png

código CSS

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

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

Answer 1

Hace un par de semanas me enfrentaba el mismo problema. Estamos almacenando gráficos vectoriales en un archivo de fuente para evitar la implementación de imágenes separadas o sprites css. Una solución sencilla sería utilizar, por ejemplo, la fuente de ardilla

http://www.fontsquirrel.com/tools/webfont-generator

sin (!) La opción de optimización, que procesa la fuente para optimizarlo para la web y, a veces se rompe debido a los intentos de compresión, si don Cumplir con algunos estándares. Un posible inconveniente podría ser que sus archivos se vuelvan un poco más grandes. También puede probar este servicio web:

http://fontface.codeandmore.com/indexnew.php

Espero que esto ayude!

Answer 2

Bueno, en lo que respecta al antialiasing, las ventanas pueden ser bastante feas cuando se renderiza texto delgado. Un truco común es intentar aplicar un trazo de texto, así:

-webkit-text-stroke: 0.3px 

En cuanto a su problema de base, que parece ser un problema con la fuente real. Si no está conectado a @ font-face, soy bastante parcial a Google Webfonts

Solo debe incluir un enlace css en su encabezado, luego adjunte la fuente correspondiente a una clase css.

Answer 3

Salir de una extremidad aquí, pero creo que subiste (¿ilegalmente?) Una alternativa construida previamente a la web a Helvetica en Font -quirrel.com "roll-your-own" @ face-kit ... tisk tisk.

Los resultados que obtiene son bastante típicos de cómo las PC representan las fuentes en la pantalla.

FF Schulbuch Nord: Creado en 1991 ($ 239 si desea comprarlo en fontshop.com). http://www.fontshop.com/fonts/singles/fontfont/ff_schulbuch_nord_ot_regular/&s=c

TexGyre en fontsquirrel es una (sin embargo, no es tan bonita) alternativa bastante justo a Helvetica y se ve bien en PC, Mac, etc.

Answer 4

Tuvimos un problema similar con algunas de nuestras fuentes, y estoy bastante seguro de que lo que lo solucionó fue establecer "Truetype Hinting" en "Keep existing".