'Lato' rendering di caratteri dispari in safari, non in chrome, o firefox

Im utilizzando il carattere 'Lato' da google web font, e la sua visualizzazione bene su tutti i browser oltre al safari.'Lato' rendering di caratteri dispari in safari, non in chrome, o firefox

Im utilizzarlo in font-weight:100;

qui ci sono alcune schermate dei vari browser. Qualche idea su cosa potrebbe causarne il rendering estremamente sottile? O se c'è un modo in cui posso impostarlo per il rendering in font-weight:300; solo per safari?

Ive ha anche fatto un violino js del problema - http://jsfiddle.net/qLHuc/1/

FIREFOX

enter image description here

CROMO

enter image description here

SAFARI

enter image description here

fonte

2013-03-14 sam

100 è estremamente leggero. Sei sicuro che Safari non sia l'unico a renderlo correttamente? Sembra diverso a 300 su Chrome e Firefox? –

Yeh, normalmente andrei con 100 testo, ma è un sottotitolo 24px in modo che non passi in dissolvenza sullo sfondo. le immagini di cui sopra sono scala 1: 1. L'ho provato nel 300 e in Safari 300 assomiglia al 100 di tutti gli altri browser. In chrome e firefox 300 sembra più spessa – sam

Crea un jsfiddle per noi. –

io non so perché, ma Safari è la disabilitazione subpixel antialiasing alle piccole dimensioni dei caratteri in quella pagina. È possibile risolvere il problema applicando -webkit-font-smoothing: subpixel-antialiased. Vedi qui: http://jsfiddle.net/qLHuc/3/

Tuttavia, penso che dovresti considerare l'utilizzo di un carattere più pesante. Hai provato questo su Windows? Probabilmente sembrerà molto, molto leggero. OSX rende il testo molto pesante quando l'antialiasing subpixel è abilitato, e specialmente quando il testo è su uno sfondo scuro o colorato. Quello che vedi nello screenshot di Safari è simile a quello che vedranno le persone che non sono su OSX.

fonte

2013-03-14 18:13:12

Mi sono imbattuto in un problema simile che è apparso esattamente lo stesso. Stavo usando il CSS font-weight: lighter; durante l'utilizzo di questo link fonte google:

http://fonts.googleapis.com/css?family=Lato:300,400

In qualche modo stava visualizzando come 100 peso! Quindi, ora utilizzo esplicitamente lo font-weight:300; per ottenere quello che voglio. Non ne sono sicuro, ma credo che questo probabilmente abbia qualcosa a che fare con me con il font sul mio sistema, e Google suggerisce che il mio computer usa il font di sistema prima di scaricarlo di nuovo ... Non l'avrei capito senza questa Q e A, grazie!

fonte

2013-11-12 02:24:44 counterbeing

Ho anche affrontato un problema simile, quando ho provato a utilizzare i caratteri di google con font-weight: 300 - funziona bene in tutti i browser eccetto safari.

Ho risolto questo aggiungendo sotto la proprietà css.

-webkit-font-smoothing: antialiased;

fonte

2014-10-17 07:07:39 Srinivas

'Lato' rendering di caratteri dispari in safari, non in chrome, o firefox

risposta

Problemi correlati