Ombreggiatura testo di Google Chrome

Question

Google Chrome ha un difetto estremamente fastidioso nella sua implementazione di text-shadow CSS3. L'antialiasing subpixel viene disattivato quando viene applicata l'ombreggiatura del testo. Nessuna quantità di -webkit-font-smoothing lo persuaderà altrimenti. L'anti-alias del canale alfa grezzo porta all'ombra che si mescola con le lettere e questo insieme al testo pixelato finisce per produrre un aspetto molto brutto. Ciò è ancora più evidente se si usano font di scrittura a mano come Monotype Corsiva http://www.newfonts.net/index.php?pa=show_font&id=130

Uno dei posti che si vede chiaramente è su Twitter - http://dev.twitter.com/pages/auth. L'ombreggiatura del testo viene utilizzata per delineare il testo lì: visualizza la pagina in Chrome, confronta con FF o IE, vedrai quanto è grave.

L'effetto peggiora ulteriormente con il testo più piccolo finché non lo rende completamente illeggibile. La discussione tecnica del problema è disponibile qui: http://www.google.com/support/forum/p/Chrome/thread?fid=5d1c0f2082af0f21000483e9a516d36e&hl=en

C'è un bug inserito nel progetto Chromium (numero 23440). Questo bug è in circolazione da più di un anno e non è ancora assegnato a nessuno. Gli sviluppatori di Google lo hanno visto, hanno deciso che non è così importante e lo hanno lasciato invecchiare. Risulta che risolvono solo i bug "popolari", una pratica così zoppa che sembra impressionante! Sono molto deluso da Chrome! La tipografia Web e i CSS3 sono usati da sempre più persone ogni giorno per rendere il web un posto molto più bello! È un peccato che tale problema esista per rallentarlo.

Quindi, è necessario uno sforzo pubblico per ottenere questo fisso. Racconta agli altri di questo, scrivi nei tuoi blog. Puoi andare a http://code.google.com/p/chromium/issues/detail?id=23440 e votare per il problema. Puoi farlo facendo clic sulla stella situata in alto a sinistra (alcuni tipi di account Google richiesti - gmail, ecc.).

Per rendere le cose più chiare - la mia domanda ha due obiettivi:

1. trovare una soluzione tecnica.
2. Imposta Google come risolvere il problema in Chrome.

Voterò ogni link pubblicato su un articolo sul problema e contrassegnerò come accettata la migliore soluzione tecnologica o uno sforzo pubblico.

Answer 1

@sebastian's fix non può funzionare per le vecchie versioni di Chrome.
Screenshot in Iron Browser (bivio Chromium) v3.0.197.0:
                                                                                                                   
Tutti quelli che sono stati assegnati un'ombra lo stesso aspetto e -webkit-font-smoothing non ha alcun effetto, così come -webkit-text-stroke.

Invece, ho sperimentato fino a che non è venuta in mente questa correzione: http://jsbin.com/acalu4

TLDR: aggiungere un innocuo 0 0 0 transparent, prima all'ombra dell'altro (s).

Problemi noti: alcuni browser possono gestire solo 1 text-shadow. Per non influenzarli (uccidendo le loro uniche ombre) questo dovrebbe essere applicato tramite javascript solo a Chrome.

Answer 2

la prima parte (tecnica provvisoria): dare al testo un tocco sottile.

provare questo css, potrebbe essere necessario modificare i valori per ottenere l'effetto desiderato.

-webkit-font-smoothing: subpixel-antialiased; /* or antialiased; */ 
-webkit-text-stroke: .10pt black; /* or 0.01em might be better */ 

solo browser WebKit (Chrome, Safari) leggono, in modo che non influiranno FF o IE.

gioco con un esempio qui: http://jsfiddle.net/SebastianPataneMasuelli/NfmU7/6/

Answer 3

ho trovato una soluzione per questo. Sembra funzionare in Safari 4+, Chrome (testato su 8.0x) e Firefox 3.5.

Prova ora:

text-shadow: 0px 0px rgba(0,0,0,0.75), 
      0px 1px rgba(0,0,0,0.75), 
      1px 0px rgba(0,0,0,0.75), 
      0px 0px rgba(0,0,0,0.75);