Problemi di rendering dei caratteri di Windows con @ font-face nei CSS

Question

Ho problemi con @ font-face sui computer Windows (non è necessario specificare il browser). Funziona bene in linux e osx.

Questo è il codice css sto usando (generato con font-squirel)

Controlla gli screenshot per il problema .. Sembra che ci siano problemi 2

• Su Windows i font vengono ' Dancing'. Non sono allineati sulla linea di base.
• In Windows i caratteri non hanno l'anti-alias.

Qualcuno ha un'idea? Grazie in anticipo.

Schermata in OSX & Linux:

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

Schermata in Windows:

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

codice 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

Ho dovuto affrontare lo stesso problema alcune settimane fa. Stiamo memorizzando immagini vettoriali in un file di font per evitare l'implementazione di immagini separate o sprite css. Una soluzione semplice sarebbe quella di utilizzare per esempio Font Squirrel

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

senza (!) L'opzione ottimizzazione, che elabora il tipo di carattere per ottimizzarlo per il web e, a volte si rompe a causa di tentativi di compressione, se don soddisfare alcuni standard Un possibile svantaggio potrebbe essere che i tuoi file diventano un po 'più grandi. Si può anche provare questo webservice:

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

Spero che questo aiuti!

Answer 2

Per quanto riguarda l'antialiasing, le finestre possono essere piuttosto brutte quando si esegue il rendering di testo sottile. Un trucco comune è quello di provare ad applicare un colpo di testo in questo modo:

-webkit-text-stroke: 0.3px 

Per quanto riguarda il problema di base, che sembra essere un problema con il font effettivo. Se non sei collegato a @ font-face, sono piuttosto parziale a Google Webfonts

Dovresti solo includere un link css nell'intestazione, quindi collegare il font corrispondente a una classe css.

Answer 3

Uscire su un arto qui, ma penso che tu abbia caricato (illegalmente?) Un'alternativa pre-web costruita per Helvetica in "face-kit" roll-your-own di FontSquirrel.com ... tisk tisk.

I risultati che si ottengono sono piuttosto tipici di come i PC rendono i caratteri sullo schermo.

FF Schulbuch Nord: creato nel 1991 ($ 239 se si desidera acquistarlo da fontshop.com). http://www.fontshop.com/fonts/singles/fontfont/ff_schulbuch_nord_ot_regular/&s=c

TexGyre su fontsquirrel è abbastanza giusto (anche se non così bella) alternativa al Helvetica, e si guarda bene su PC, Mac, ecc

Answer 4

Abbiamo avuto un problema simile con alcuni dei nostri caratteri, e sono abbastanza sicuro di cosa sia stato fissato impostando "Truetype Hinting" su "Keep existing".