Techniques de lissage de polices? le rendu texte-ombre différemment dans Chrome 14.0.833.0 ou version ultérieure
EDIT:
Nous sommes en Chrome 19 maintenant, et ce n'est toujours pas résolu. Juste une précision: ce qui se passe dans Chrome sur Windows, pas Linux ou Mac. Je pense que cela a à voir avec Cleartype. Google, s'il vous plaît corriger cela.
J'ai été en utilisant CSS3 text-shadow
pour émuler IE9 du lissage des polices sur les autres navigateurs. Fondamentalement, je viens de mettre le texte de l'ombre d'un conteneur de texte à l'arrière-plan du conteneur. Vous pouvez voir le comportement en définissant text-shadow
sur un largish élément font en quelque chose de plus bas que le Chrome 14.0.833. Le texte semble lisse. Supprimer le texte de l'ombre et de la police semble dentelée.
Toutefois, en Chrome 14.0.833 (mise à JOUR: apparaît à l'écran, c'est aussi "cassé" dans 14.0.834) cela ne fonctionne plus. Le texte de l'ombre de la propriété fonctionne, mais pas dans la façon dont elle était avant. Vous pouvez voir le comportement ici (il suffit de charger avec diff. Chrome versions)
Il me semble que si dans le vieux Chromes l'ombre du texte a commencé à l'intérieur du texte, juste un peu, puis étaler - qui est peut-être pourquoi le text-shadow hack travaillé. Dans la plus récente de google Chrome, il semble que le texte de l'ombre commence juste à l'extérieur le texte, c'est pourquoi il ne fonctionne pas. Voyez ce que je veux dire ici.
Ma question est fondamentalement: Est-ce un bug? Qui est le comportement attendu, si? Existe-il d'autres lissage des polices solutions de contournement que je peux utiliser?
Le W3C spec n'a pas l'air de dire que le comportement attendu est, si j'ai fait voir que peut-être je devrais être à l'aide de texte-plan (ce qui est plutôt pas pris en charge, ce qui est contraire au but)
source d'informationauteur Thomas Shields
Vous devez vous connecter pour publier un commentaire.
Ok, j'ai passer un peu de temps sur ce sujet et c'est ce qu'il vient: C'est un bug.
Tout d'abord,
-webkit-font-smoothing:antialiased;
ne fonctionne que pour les Mac, pas sur Windows.Je suis sur Windows7, j'ai créé une couche Pixlr image avec des captures d'écran d'un JSfiddle j'ai fait qui a eu 4 différents éléments avec différentes text-shadow appliquées à chacun. Vous pouvez clairement voir que text-shadow a changé depuis Chrome13 et Chrome 14.0.835. J'ai eu à passer entre la Bêta et Dev channel une couple de fois parce que j'ai foiré, la désinstallation etc. ugh.
Télécharger les couches Pixlr fichier image que j'ai faite à partir de:
http://dl.dropbox.com/u/7353877/Chrome-text-shadow-v13-v14_0_835.pxd
Ensuite, allez à http://pixlr.com/editor/ et choisissez d'ouvrir le fichier à partir de l'ordinateur, ouvrez le fichier.
Maintenant dans Pixlr, un zoom sur les quatre lignes de texte, dans le panneau calques sur le calque supérieur, cliquez sur la case à cocher et à décocher, puis vérifier à nouveau, faire plus et plus et de voir comment drastique le changement de text-shadow est.
Cette question devrait être présenté comme un bug. Un lien vers cette page pourrait être utilisé pour montrer l'effet, en cas de besoin.
JSfiddle (Le JSfiddle que j'ai utilisé dans les captures d'écran)
http://jsfiddle.net/nicktheandroid/Xkp9q/
J'ai mis un morceau de tarte dans le four à micro-ondes d'une heure et demi.... il fait froid 🙁
Bien, j'ai pensé à elle, sorta. Ennuyeux depuis que j'ai mis une prime, mais peu importe.
Je suis assez certain que ce n'est pas un bug et c'est le comportement attendu - surtout depuis que nous avons vu un peu plus d'itérations de Chrome et il est resté le même.
Quelques méthodes différentes de travail. J'ai écrit un peu pour mon blog, vous pouvez voir l'article complet ici, mais voici l'essentiel:
pourrait fonctionner pour vous
OUI! J'ai trouvé une solution pour ce problème. C'est bizarre, mais ça fonctionne pour moi.
Donc, pour le faire fonctionner, mettre ce style sur l'élément que vous souhaitez lisse:
J'ai mis en place un exemple de fichier HTML avec juste ce style de sorte que vous pouvez le tester rapidement.
OU
Testé et fonctionne très bien dans les différentes versions d'Opera, Chrome, Safari & Firefox.
C'était en effet la façon dont beaucoup de polices web (Google Webfonts et également très professionnel polices de Typekit, etc.) regardé dans Firefox (à gauche) et Google Chrome (à droite) sur les systèmes Windows (et, éventuellement, d'ailleurs). Pas de blague! Pour préciser cela: Le seul navigateur qui a complètement foiré Google Webfonts était navigateur Google Chrome. Comment le malade est qui ? En 2013, le navigateur Opera a la mise sous tension du moteur de rendu pour webkit (=la déchirante moteur dans google Chrome), de sorte que ce problème existe dans l'Opéra de trop.
plus : http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/