Google Webfonts e Anti-aliasing

Question

Mi piace utilizzare Google Webfonts nei miei lavori commerciali, ma rendono un po 'troppo frastagliato, sebbene nell'anteprima fornita da Google, rendono molto liscio.

Check this out: http://www.google.com/fonts/specimen/Oxygen

Il più grande anteprima sembra molto bella e liscia, ma quando ho importare sulla mia pagina e usarlo, sembra distorta sui bordi, molto frastagliati. Google utilizza una libreria in più per ottenere questo anti-aliasing o faccio qualcosa di sbagliato?

Answer 1

Se si disinstalla il font dal proprio sistema (cartella Windows/Fonts), si dovrebbe essere in grado di vederlo liscio. Per superare questo. Non utilizzare @import o il link diretto da google. Piuttosto scarica il pacchetto da www.fontsquirrel.com (l'intero kit di caratteri web) e usa @ font-face nel tuo css per ottenere caratteri uniformi.

Answer 2

Fonts render modo diverso in base:

• Risoluzione dello schermo/monitor
• Browser
• sistema operativo
• Dimensioni d'uso e accennando

Sulla base del fatto che i font sembra peggio in Chrome e Firefox l'unica cosa che puoi fare per cercare di ottenere quei browser per renderli migliori. Senza vedere il codice le uniche cose che posso consigliare sono:

• Assicurandosi che si sta utilizzando decente css reset (qualcosa di simile a questo: http://meyerweb.com/eric/tools/css/reset/).

• Prova ad aggiungere font-weight: normal; ai caratteri per vedere se questo fa la differenza; a volte i browser e le strutture cercano di aggiungere un falso in grassetto alle cose.

• Assicurando che si stiano utilizzando le versioni effettive dei caratteri e non solo applicando gli stili CSS.

• Se tutto il resto fallisce, provare a battere leggermente la dimensione del carattere su/giù e vedere se il carattere suggerisce meglio a queste dimensioni.

Spero che questo aiuti!

Answer 3

Non sono a conoscenza dei dettagli tecnici completi, ma Chrome potrebbe rendere i caratteri in modo diverso rispetto ad altri browser.

Quello che puoi provare è specificare una regola font-smoothing nel tuo file CSS.

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

Questa regola è spesso utilizzata.A volte, la gente lo applica ad ogni selettori (con *):

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

I tre valori possibili per questa proprietà sono:

-webkit-font-smoothing: none; 
-webkit-font-smoothing: subpixel-antialiased; 
-webkit-font-smoothing: antialiased; 

Purtroppo, non riesco a riprodurre il problema smoothing in questo momento (I non so perché, il mio computer non cambia la levigatura e tutto è perfettamente leggibile, forse una recente correzione di Chrome ma non riesco a trovare nulla a riguardo).

Ulteriore lettura su:

• su ClearType & Chrome: il Google forums
• -webkit-font-smoothing demo su Codepen.

Spero di poterti aiutare. :)