Techniques Lissage de police? text-shadow rendu différemment dans Chrome 14.0.833.0 ou supérieur

Question

EDIT:

Nous sommes dans Chrome 19 maintenant, et cela est toujours pas fixé. Une précision: ce qui se passe dans Chrome sous Windows, pas Linux ou Mac. Je pense qu'il a à voir avec ClearType. Google, s'il vous plaît résoudre ce problème.

Je me sers text-shadow CSS3 pour émuler le lissage des polices de IE9 sur d'autres navigateurs. En fait, je viens de définir le texte ombre d'un conteneur de texte au fond du récipient. Vous pouvez voir le comportement en définissant text-shadow sur un élément de police assez grande à quoi que ce soit plus bas que Chrome 14.0.833. Les regards de texte lisse. Retirez le texte ombre et les regards de police en dents de scie. Cependant, dans Chrome 14.0.833 (MISE À JOUR: apparaît il est également « cassé » 14.0.834) ce ne fonctionne plus. La propriété text-shadow fonctionne toujours, mais pas la façon dont il a fait avant. Vous pouvez voir le comportement (juste le charger avec diff. Versions Chrome) Il semble que dans l'ancienne Chromes l'ombre du texte a commencé dans le texte un peu, puis étaler - ce qui est peut-être la raison pour laquelle le hack-ombre du texte a travaillé. Dans le Chrome plus récente, il semble que l'ombre du texte commence juste à l'extérieur le texte, ce qui est la raison pour laquelle il ne fonctionnera pas. Voyez ce que je veux dire .

Ma question est essentiellement: Est-ce un bug? Ce qui est le comportement attendu, si non plus? Y at-il un autre lissage des polices solutions de contournement que je peux utiliser?

ne semble pas de spécifications Le W3C dire ce que le le comportement est destiné, bien que je l'ai vu que peut-être que je devrais utiliser du texte les grandes lignes (ce qui est un peu non pris en charge, qui contrecarre le but)

Answer 1

Eh bien, je l'ai pensé à elle, sorta. Annoying depuis que je mets une prime, mais peu importe. Je suis assez certain que ce n'est pas un bug et il est prévu un comportement - d'autant plus que nous avons vu quelques itérations de Chrome et il est resté le même. Quelques méthodes de travail. J'ai écrit un peu pour mon blog, vous pouvez voir l'article complet , mais est ici la plus grande partie de celui-ci :

Tout d'abord, j'ai essayé le -webkit-text-stroke:1px #000 où #000 est le couleur du texte. Mais ce style est destiné à être utilisé lorsque la couleur le texte est différent de la course, pour un joli texte-plan. Quand les deux sont de la même couleur, il semble ... bizarre. Je ne sais pas pourquoi; Je ne suis pas font-rendu expert. Vous pouvez voir le comportement dans l'image après l'article.

Ensuite, j'ai essayé un text-shadow:#000 0 0 1px simple où #000 est le même couleur que le texte. En raison du même problème Chrome 14.0.833+, ce laisse encore la police regardant saccadés. Il vaut mieux que juste le texte brut, cependant.

Ensuite, j'ai essayé un combiné les deux tentatives ci-dessus. Cela ressemble un peu peu mieux, mais il gonfle le texte tel qu'il ajoute essentiellement 2 pixels à thinkness du texte.

Enfin, j'ai essayé d'appliquer deux textes-ombres: text-shadow:#000 0 1px 1px,#000 0 -1px 1px>> où #000 est la couleur du texte. Ce que cela fait est appliquer deux ombres de texte dont l'un est poussé vers le bas un peu et la autre poussée vers le haut. De cette façon, l'ombre du texte recouvre les bords déchiquetés. Il vracs le texte un peu, mais certainement aplanit dehors.

En fonction de la taille de votre texte, des méthodes de travail différentes. Plus petite texte (mais toujours déchiquetée) pourrait utiliser le texte ombre, un texte plus large pourrait utiliser la méthode ombre / accident vasculaire cérébral, et très grand texte pourrait utiliser la méthode à double ombre. Bien sûr, plus le texte moins sensible les quelques pixels supplémentaires deviennent. Vous pouvez voir toutes les différentes méthodes

Answer 2

D'accord, j'ai passé un peu de temps à ce sujet et voici ce qu'il se résume à:. Il est un bug

Tout d'abord, -webkit-font-smoothing:antialiased; ne fonctionne que pour Mac, pas Windows.

Je suis sur Windows7, j'ai créé une image de Pixlr avec posés des captures d'écran d'un jsFiddle je fait qui avait 4 éléments différents avec ombre de texte appliqué à chacun. Vous pouvez clairement voir que le texte-ombre a changé depuis Chrome13 et Chrome 14.0.835. Je devais basculer entre le canal Beta et Dev deux ou trois fois parce que je foiré, etc. ugh désinstallation.

Télécharger le fichier image Pixlr en couches que j'ai fait à 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 depuis l'ordinateur, ouvrez le fichier. Maintenant en Pixlr, un zoom avant pour les quatre lignes de texte, dans le panneau des couches sur la couche supérieure cliquez sur la case à cocher et décocher, puis vérifiez à nouveau, faire plus et plus et voir comment drastique le changement de text-shadow est.

Cela devrait être soumis comme un bug. Un retour de lien vers cette page pourrait être utilisée pour montrer l'effet, si nécessaire.

jsFiddle (Le jsFiddle I utilisé dans les captures d'écran) http://jsfiddle.net/nicktheandroid/Xkp9q/

Je mets un morceau de tarte au micro-ondes une heure et demie il y a .... il fait froid: (

Answer 3

text-shadow: transparent 0px 0px 0px, #000 1px 2px 1px;

ou

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

Testé et fonctionne très bien dans les différentes versions d'Opera, Chrome, Safari et Firefox.

Answer 4

-webkit-font-smoothing:antialiased; 

travail de puissance pour vous

Answer 5

OUI! J'ai trouvé une solution à ce problème. Il est bizarre, mais ça marche pour moi.

Alors, pour le faire fonctionner, mettre ce style sur l'élément que vous voulez lisser:

-webkit-border-bottom-left-radius: 1px;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01);
overflow: hidden;

Je l'ai mis en place un fichier HTML exemple avec juste ce style si vous pouvez tester rapidement.

Answer 6

Ce fut en effet la façon dont beaucoup de WebFonts (Google et aussi les polices WebFonts hautement professionnels de Typekit etc.) regardé dans Firefox (à gauche) et Google Chrome (à droite) sur les systèmes Windows (et éventuellement ailleurs aussi). Sans blague! Pour clarifier ceci: le seul navigateur qui a complètement foiré Google WebFonts était le navigateur de Google Chrome. Comment est-ce malade? En 2013, le navigateur Opera a changé, il est le moteur de rendu WebKit (= le moteur déchirantes dans Chrome), de sorte que ce problème existe dans Opera aussi.

plus: http: //www.dev-metal .com / fix-laid-font-rendu-google-chrome /