2012-10-28 9 views
5

Ho il seguente nel file CSS per il mio sito web:Come posso visualizzare correttamente il carattere in tutti i browser?

body { 
font-family: Georgia, "Times New Roman", serif; 
font-size: 1.125em; 
line-height: 1.5em; 
} 

In Safari sul mio Mac del sito è il tipo di carattere guardando il modo in cui voglio che:

http://i.imgur.com/mywDZ.png

Tuttavia, il computer Windows in IE e Chrome il carattere non sembra quanto sopra, si veda:

http://i.imgur.com/aL0vi.jpg

La mia domanda è, come faccio a ottenere che il font abbia lo stesso aspetto in tutti i browser su tutti i SO, come quello mostrato sopra al primo screenshot?

Grazie in anticipo per il vostro aiuto.

risposta

5

Questa è una questione di attenuazione e che è diversa da un browser a altro, non "leggono" i caratteri allo stesso modo.

Ecco un articolo che spiega il processo, Font smoothing explained.

ed ecco un CSS incidere si può provare al fine di ottenere lo stesso risultato in tutto il mondo:

html, html a { 
    -webkit-font-smoothing: antialiased; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004); 
} 

Ulteriori approfondimenti: 4.2 Font smoothing: the 'font-smooth' property in the CSS 3 fonts module specs from the W3C

+0

Il documento W3C collegato a è una bozza obsoleta dal 2002. La bozza attuale http://www.w3.org/TR/css3-fonts/ non ha nulla sulla levigatura dei font. –

+0

L'hack CSS apparentemente funziona solo nei browser WebKit su Mac e, secondo quanto ho letto l'ultima volta, il valore 'antialiased' non è attualmente supportato. In ogni caso, l'hack non aiuta affatto con il rendering su Windows. –

0

Windows è rinomato per la sua scarsa arrotondamento dei font; l'unica alternativa sicura, cross-browser sta sostituendo l'intero contenuto con un'immagine .png (come .jpg tende ad essere terribile con il testo). Naturalmente, questa non è un'alternativa valida, quindi fino a quando tutti i browser supportano la proprietà font-smoothing (come dimostrato sopra), sei bloccato nella situazione attuale.

2

Non c'è nulla che tu possa fare al riguardo, sebbene tu possa testare la variazione per i font che usi e possibilmente riconsiderare le tue scelte di font. Alcuni tipi di carattere sono influenzati più di altri dalle differenze.

Su diverse piattaforme e, in una certa misura, in diversi browser, i caratteri sono resi in modo diverso. Vedi per es. A Closer Look At Font Rendering.

Il rendering può dipendere anche dalle impostazioni del sistema e/o del browser. Quello che vedo su Windows, quando collaudo il tuo foglio di stile sul testo normale, è molto diverso dalla tua schermata.

Problemi correlati