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

  1. 8

    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 🙁

  2. 5

    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:

    Tout d'abord, j'ai essayé le -webkit-text-stroke:1px #000 où #000 est l'
    couleur du texte. Mais ce style est conçu pour une utilisation où la couleur de
    le texte est différent de l'avc, pour un joli texte-plan. Lorsque
    les deux sont de la même couleur, il a l'air...bizarre. Je ne sais pas pourquoi; je ne suis pas
    police-rendu de l'expert. Vous pouvez voir le comportement dans l'image après
    l'article.

    Ensuite, j'ai essayé un simple text-shadow:#000 0 0 1px où #000 est le même
    couleur que le texte. Pour la même raison Chrome 14.0.833+ problème, ce
    encore des feuilles de la police, regarder un peu en dents de scie. C'est mieux que de simplement
    texte brut, cependant.

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

    Enfin, j'ai essayé d'appliquer le texte de deux-ombres: text-shadow:#000 0 1px 1px,#000 0 -1px 1px > > où #000 est la couleur du texte. Ce que ce n'est
    appliquer le texte de deux ombres, dont l'un est poussé vers le bas un peu et le
    d'autres poussés à la hausse. De cette façon, le texte de l'ombre couvre les bords irréguliers. Il
    gonfle le texte un peu mais certainement lisse.

    En fonction de la taille de votre texte, les différentes méthodes de travail. Les petits
    (mais encore déchiqueté) texte pourrait utiliser le text-shadow, le plus grand texte pourrait
    l'utilisation de l'ombre/avc méthode, et très grand texte pourrait utiliser l'
    double-ombre méthode. Bien sûr, le plus grand le texte le moins perceptible
    le supplément de quelques pixels devenir. Vous pouvez voir toutes les différentes méthodes
    ici

  3. 1
    -webkit-font-smoothing:antialiased;

    pourrait fonctionner pour vous

  4. 0

    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:

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

    J'ai mis en place un exemple de fichier HTML avec juste ce style de sorte que vous pouvez le tester rapidement.

  5. 0
    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 & Firefox.

  6. 0

    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/