Rendu des ombres de texte dans Google Chrome

Question

Google Chrome présente un défaut extrêmement gênant dans son implémentation de l'ombre textuelle CSS3. L'anticrénelage sous-pixel est désactivé lorsque le text-shadow est appliqué. Aucune quantité de -webkit-font-smoothing ne pourra le persuader du contraire. L'anticrénelage grossier du canal alpha entraîne le mélange de l'ombre avec les lettres, ce qui, avec le texte pixélisé, donne un aspect très laid. Cela est encore plus évident si des polices d'écriture manuscrite sont utilisées, comme Monotype Corsiva. http://www.newfonts.net/index.php?pa=show_font&id=130

L'un des endroits où l'on peut s'en rendre compte est sur Twitter. http://dev.twitter.com/pages/auth . Le text-shadow est utilisé pour le contour du texte à cet endroit : regardez la page dans Chrome, comparez avec FF ou IE, vous verrez à quel point c'est mauvais.

L'effet s'aggrave avec un texte plus petit jusqu'à le rendre complètement illisible. Une discussion technique sur ce problème est disponible ici : http://www.google.com/support/forum/p/Chrome/thread?fid=5d1c0f2082af0f21000483e9a516d36e&hl=en

Il y a un bogue soumis dans le projet Chromium (question 23440). Ce bogue existe depuis plus d'un an et n'a toujours pas été attribué à qui que ce soit. Les développeurs de Google l'ont vu, ont décidé qu'il n'était pas si important et l'ont laissé vieillir. Il s'avère qu'ils ne corrigent que les bogues "populaires", une pratique tellement nulle qu'elle en paraît impressionnante ! Je suis très déçu par Chrome ! La typographie Web et les CSS3 sont utilisés par de plus en plus de personnes chaque jour pour rendre le Web beaucoup plus beau ! C'est une honte qu'un tel problème existe pour ralentir cela.

Un effort public est donc nécessaire pour corriger cette situation. Parlez-en aux autres, écrivez dans vos blogs. Vous pouvez aller à http://code.google.com/p/chromium/issues/detail?id=23440 et voter pour la question. Vous pouvez le faire en cliquant sur l'étoile située en haut à gauche de la page (un certain type de compte Google est requis - gmail, etc.).

Pour que les choses soient plus claires, ma question a deux objectifs :

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

Je voterai chaque lien posté vers un article sur le sujet et marquerai comme accepté la meilleure solution technologique ou effort public.

Answer 1

La solution de @sebastian peut ne pas fonctionner pour les anciennes versions de Chrome.
Capture d'écran sous Iron Browser (Chromium fork) v3.0.197.0 :
                                                          
Tous ceux qui ont été assignés à une ombre se ressemblent et -webkit-font-smoothing n'a aucun effet, de même que -webkit-text-stroke .

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

tldr : ajouter un inoffensif 0 0 0 transparent, avant votre ou vos autres ombres.

Problèmes connus : certains navigateurs ne peuvent gérer que 1 text-shadow . Afin de ne pas les affecter (en tuant leurs seules ombres), ceci devrait être appliqué via javascript uniquement à Chrome.

Answer 2

La première partie (solution de contournement 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, donc cela n'affectera pas FF ou IE.

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

Answer 3

J'ai trouvé une solution à ce problème. Elle 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);