@ font-face glifi sfocati/in grassetto/distorti per i font remoti

Question

Sto tentando di passare a @font-face invece di fare affidamento sugli utenti per installare il font (per essere precisi è il font Terminus, piuttosto la sua versione TTF).

Purtroppo, ho avuto alcuni bizzarra "grassetto" o "distorsione" dei caratteri quando si tratta di file da remoto ospitati, come mostrato in questa immagine:

Come si può vedere, per qualche motivo i font recuperati in remoto sono distorti nelle dimensioni 12, 14, 16, 18, 20, 24 mentre i font locali hanno una sorta di "normalizzazione" applicata su di essi per quelle parti che li fanno sembrare belli e sul posto.

Un'altra cosa da ricordare è che ho tentato di usare FontSquirrel's WebFont Generator cui demo-HTMLs schermata viene visualizzato lungo questi codici CSS rispettivamente:

@font-face { 
    font-family: 'terminus_ttfmedium'; 
    src: url('terminusmedium-4.38-webfont.ttf') format('truetype'); 
} 

e

@font-face { 
    font-family: 'terminus_ttfmedium'; 
    src: local('Terminus (TTF)'); 
} 

Terminus (TTF) è lo stesso pacchetto di file, appena installato su /usr/share/fonts/.

Qualsiasi intuizione sarebbe molto apprezzata!

MODIFICA: la modifica delle opzioni avanzate di FontSquirrel sembra non aiutare affatto questo problema.

EDIT2: Nessuno dei due metodi ha tentato di funzionare su Firefox. Inoltre, ho copiato un font in una directory di lavoro (lo stesso usato localmente), l'ho collegato tramite il campo "url" e mantiene comunque le distorsioni. Questo è inutile!

Answer 1

Forse si può provare a forzare il rendering dei font anti-aliasing:

body { 
-webkit-font-smoothing: antialiased; 
font-smoothing: antialiased; 
} 

Answer 2

font-scoiattolo usato per avere una sezione con più uscite. TTF non funziona in tutte le versioni di browers

 src: url('Bevan-webfont.eot?#iefix') format('embedded-opentype'), 
    url('Bevan-webfont.woff') format('woff'), 
    url('Bevan-webfont.ttf') format('truetype'), 
    url('Bevan-webfont.svg#BevanRegular') format('svg'); 

che utilizzano per avere pacchetti di font con tutte queste estensioni, cant sembrano trovare sul sito più.

Answer 3

In realtà TTF accetta solo mozila, ci sono molti tipi di font, come TTF, SVG, WOFF, EOT. devi usare tutti i file di font. Ecco un fantastico strumento per generare fontface.

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

Ecco un esempio:

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

penso, questo vi aiuterà.

Answer 4

Sto aggiungendo questo come risposta, in quanto non ho abbastanza punti per commentare. Ma è una domanda: Hai installato Terminus localmente? Se è così, prova a disinstallarlo e guarda cosa ottieni.

Ci scusiamo per il commento come risposta ...

Answer 5

Invece di aggiungere tutto il codice CSS e tutti quei file necessari per farlo funzionare su più browser, basta provare Google WebFonts. http://www.google.com/webfonts

Answer 6

Ho trovato che incluso quanto segue sugli elementi che rendono sfocato lo sfocato.

-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
font-smoothing: antialiased;