carattere Jagged su Windows - Chrome e Safari

Question

sto usando caratteri personalizzati sulla mia pagina web utilizzando il seguente codice:

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

Questo funziona bene su tutti i browser su Mac ma guardando sul PC su Chrome e Safari sembra frastagliato. Ci sono delle correzioni che potrei usare per far sembrare tutto uguale? Qui sotto mostra la differenza (Mac a sinistra, PC a destra - entrambi su Chrome).

Answer 1

I caratteri di tipo font-face su PC in genere sembrano un po 'più inopportuni, ma i caratteri "Hinting" miglioreranno la leggibilità.

Prova a eseguire i caratteri tramite il convertitore di caratteri scoiattolo, che può elaborare il suggerimento come parte della conversione.

http://www.fontsquirrel.com/fontface/generator

Come nota a margine che avevo anche appena non uso @ font-face per Helvetica, e solo contare su persone che hanno il tipo di carattere installato, ricadendo a Arial. Non la corrispondenza più vicina, ma ti darà il miglior risultato.

Answer 2

Sì, ci sono. Utilizzare un'alternativa come cufon per caratteri uniformi.

Answer 3

Non sono sicuro di quale sistema operativo si sta utilizzando, ma potrebbe essere necessario abilitare ClearType per i caratteri dello schermo.

In XP: accedere al pannello di controllo display, e selezionare la scheda Aspetto. Da lì, fare clic su Effetti. Selezionare il metodo Utilizzare il seguente metodo per smussare i lati dei caratteri dello schermo e quindi selezionare ClearType nell'elenco.

Questo ha risolto il problema per me in passato.

Answer 4

Questa è una differenza fondamentale tra il modo in cui Windows e OS X gestiscono il rendering dei caratteri, quindi c'è poco che si possa fare. Una correzione hacky per Chrome sta aggiungendo un'ombra esterna quasi invisibile (text-shadow: rgba(0, 0, 0, .01) 0 0 1px) che la costringe ad antialias del testo. Servizi come Typekit stanno lavorando sodo per risolvere il problema, come ad esempio serving fonts as Postscript outlines, ma questo non aiuta molto il tuo problema.

Answer 5

Si può provare:

-webkit-transform: rotate(-0.0000000001deg); 

Questa ruota l'elemento quel tanto che basta per rendere il browser lo rendono anti-aliasing. Non so cosa faccia per le prestazioni, ma non ho notato alcuna differenza nel rendering.

soluzione trovata qui: https://twitter.com/#!/komejo/statuses/117241707522818048

Answer 6

Sembra Chrome non piace lo SVG di essere chiamato ultima nella dichiarazione CSS @ font-face. Aggiungi il tuo dopo @ font-face {...} nel CSS:

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

La query @media rivolge browser WebKit e dice loro di utilizzare esclusivamente il file .SVG. Nella mia esperienza questo migliora il rendering su Windows Chrome.

ATTENZIONE: questa correzione potrebbe causare un altro problema in Chrome su Windows 7 o 8, che ho riscontrato in alcune occasioni: l'utilizzo di questa correzione a volte impedisce il wrapping delle parole in Chrome su Windows. Un comportamento molto strano che si verifica solo a volte e non ho trovato una soluzione per. Una domanda su questo è stato postato qui:

Strange word length issue when using font-face in Chrome

Answer 7

Questo sembra fare il trucco:

html { 
    -webkit-text-stroke-width: .10px; 
}