Rendu d’ombre de texte Google Chrome

Google Chrome présente un défaut extrêmement gênant dans l’implémentation de CSS3 text-shadow. L’anticrénelage des sous-pixels est désactivé lorsque text-shadow est appliqué. Aucune quantité de -webkit-font-smoothing ne le persuadera autrement. L’anti-alias brut du canal alpha conduit à l’ombre qui se mêle aux lettres, ce qui, avec le texte pixellisé, finit par produire un aspect très laid. Cela est encore plus évident si des fonts d’écriture manuscrite sont utilisées, telles que Monotype Corsiva http://www.newfonts.net/index.php?pa=show_font&id=130

L’un des endroits que vous pouvez voir clairement est sur Twitter – http://dev.twitter.com/pages/auth . L’ombre du texte est utilisée pour la structure du texte: affichez la page dans Chrome, comparez-la avec FF ou IE, vous verrez à quel point elle est mauvaise.

L’effet est encore pire avec un texte plus petit, jusqu’à le rendre totalement illisible. Une discussion technique du problème est disponible à l’ adresse suivante : http://www.google.com/support/forum/p/Chrome/thread?fid=5d1c0f2082af0f21000483e9a516d36e&hl=fr

Il y a un bogue soumis dans le projet Chromium (numéro 23440). Ce bug existe depuis plus d’un an et n’est toujours atsortingbué à personne. Google devs l’a vu, a décidé que ce n’est pas si important et a laissé le temps de vieillir. Il s’avère qu’ils ne réparent que les bugs “populaires”, une pratique tellement boiteuse que cela semble impressionnant! Je suis très déçu de Chrome! La typographie Web et CSS3 sont utilisées chaque jour par de plus en plus de personnes pour rendre le site beaucoup plus beau! C’est dommage qu’un tel problème existe pour ralentir cela.

Donc, un effort public est nécessaire pour que celui-ci soit résolu. Parlez-en à d’autres, écrivez dans vos blogs. Vous pouvez aller à http://code.google.com/p/chromium/issues/detail?id=23440 et voter pour le problème. Vous pouvez le faire en cliquant sur l’écanvas située en haut à gauche (un type de compte Google requirejs – gmail, etc.).

Pour rendre les choses plus claires, ma question a deux objectives:

  1. Trouvez une solution de contournement technique.
  2. Faites en sorte que Google règle le problème dans Chrome.

Je voterai pour chaque lien publié sur un article sur le sujet et marquerai comme accepté la meilleure solution technique ou effort public.

Le correctif de @ sebastian peut ne pas fonctionner avec les anciennes versions de Chrome.
Capture d’écran sous Iron Browser (Chromium Fork) v3.0.197.0:

Tous ceux auxquels une ombre a été assignée se ressemblent et -webkit-font-smoothing n’a aucun effet, tout comme -webkit-text-stroke .

Au lieu de cela, j’ai expérimenté jusqu’à ce que je trouve ce correctif: http://jsbin.com/acalu4

tldr: ajoutez un 0 0 0 transparent, avant vos autres ombres.

Problèmes connus: certains navigateurs ne peuvent gérer qu’une text-shadow . Afin de ne pas les affecter (tuer leurs seules ombres), cela devrait être appliqué via JavaScript uniquement à Chrome.

la première partie (solution technique): donner au texte un trait fin.

essayez ce css, vous devrez peut-être modifier les valeurs pour obtenir l’effet désiré.

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

seuls les navigateurs Webkit (Chrome, Safari) le lisent, ce qui n’affecte pas FF ou IE.

jouez avec un exemple ici: http://jsfiddle.net/SebastianPataneMasuelli/NfmU7/6/

J’ai trouvé une solution pour cela. Il semble fonctionner dans Safari 4+, Chrome (testé sur 8.0x) et Firefox 3.5.

Essayez-le:

 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);