@ font-face per caratteri personalizzati, caratteri non uniformi in Chrome

Question

Ho un'applicazione Web che utilizza CSS @ font-face per incorporare caratteri personalizzati. Finora questo funziona perfettamente con IE e Firefox.

Con Chrome, tuttavia, i caratteri personalizzati appaiono pixelati e non uniformi. Di seguito è riportato un link ad uno schermo frammento di un esempio del mio carattere in Firefox & IE (in alto) e Chrome (in basso): Screenshot comparison

potrebbe essere difficile vedere la differenza di come un piccolo campione screenshot, ma quando questo sta accadendo in tutta la pagina è molto evidente.

Di seguito è un esempio di come sto utilizzando @ font-face nel mio foglio di stile:

@font-face 
{ 
    font-family: 'MyFont'; 
    src: url('../Content/fonts/MyFont.eot?') format('embedded-opentype'), 
     url('../Content/fonts/MyFont.ttf') format('truetype'); 
} 

Un'altra cosa che forse vale la pena menzionare, è che quando ho tirata fino al sito in qualsiasi browser in esecuzione su una macchina virtuale , i font sono SUPER choppy, molto peggio dell'esempio di Chrome. Questo sta accadendo quando utilizzo uno qualsiasi dei miei computer scolastici, che utilizzano tutti i desktop Win7 VMWare. Succede anche quando apro il sito da una macchina virtuale Windows 7 in esecuzione sul Mac di un amico.

Answer 1

Questo è un problema noto che gli sviluppatori Chrome sono fissaggio:

0.123.

http://code.google.com/p/chromium/issues/detail?id=137692

Per aggirare fino ad allora per prima cosa provare:

html { 
    text-rendering: optimizeLegibility !important; 
    -webkit-font-smoothing: antialiased !important; 
} 

Se questo non funziona per voi, questo work-around ha lavorato per me (di cui sopra non hanno risolto le finestre Chrome):

http://code.google.com/p/chromium/issues/detail?id=137692#c68

sembra che riorganizzare la regola CSS @ font-face per consentire a svg di apparire 'prima' risolve questo problema.

esempio:

-before-------------- 

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


-after-------------- 

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

Answer 2

Sfortunatamente, tutti i browser rendono i caratteri in modo diverso. E uno che sembra ok in uno potrebbe avere problemi in un altro. Non è così facile trovare un buon font per font-face ... se vuoi la perfezione dei pixel dovrai usare le immagini.

Ma non tutto è perduto, qui ci sono 20 font gratuiti (! Gratuito per uso commerciale, anche) che rendono abbastanza bene (finisco sempre per controllare questa lista): http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/

Ricordate che non possono ospitare pagato caratteri o li distribuiresti e potresti finire nei guai.

Answer 3

Si consiglia di giocare con optimizeLegibility: http://aestheticallyloyal.com/public/optimize-legibility/

E anche -webkit-font-smoothing: http://maxvoltar.com/archive/-webkit-font-smoothing

Potrebbe anche essere la pena utilizzare dei font-scoiattoli generatore di carattere per generare i webfonts e css per caricare nei tipi di carattere: http://www.fontsquirrel.com/fontface/generator (anche se non sono sicuro se che risolverà il vostro problema o no)

Answer 4

Per me, meglio ha funzionato:

@font-face { 
    font-family: MyFont; 
    src: url("MyFont.ttf") format('truetype'); 
} 

h1 { 
    font-family: MyFont; 
    -webkit-text-stroke: 0.5pt; 
    -webkit-font-smoothing: antialiased; 
} 

Answer 5

Io suggerirei di usare questo:

-webkit-text-stroke: 0.3pt; 
-webkit-font-smoothing: antialiased; 

Answer 6

tenta di aggiungere -webkit-transform: translateZ (1px); o un'altra trasformazione 3d.

spiegazione:

Chrome ha un altro bug - testo sfocato quando 3d trasforma applicati, il testo in modo da aggiungere proprietà suggerito offuscherà tritato e in parte risolvere il problema. È ancora un po 'sfocato, ma in molti casi è meglio che tagliato a pezzi.

esempio1 (numero): chopped text. Ho aggiunto la rotazione qui per essere sicuro che il testo venga troncato.
esempio2 (risolto): semi-smooth text. Applicare la trasformazione 3d rende il testo sfocato, quindi il testo tritato sembra più fluido.

Il piccolo problema è che sembra che non possiamo scegliere come target solo le versioni Windows di Chrome in CSS, quindi dobbiamo usare javascript per applicare la classe appropriata.

Answer 7

Questo problema verrà risolto con Chrome 37.

http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html