Schriftart -Glättungstechniken? Text-Shadow-Rendering in Chrom 14.0.833.0 oder höher anders

Question

BEARBEITEN:

Wir sind jetzt in Chrome 19 und das ist immer noch nicht behoben. Nur eine Klarstellung: Dies geschieht in Chrome unter Windows, nicht in Linux oder Mac. Ich denke, es hat mit ClearType zu tun. Google, bitte beheben Sie dies.

Ich habe CSS3 verwendet text-shadow Um die Schriftart von IE9 auf anderen Browsern zu nachzuahmen. Grundsätzlich habe ich gerade den Textschatten des Textes eines Containers auf den Hintergrund des Containers gesetzt. Sie können das Verhalten durch Einstellen sehen text-shadow auf einem großartigen Schriftelement in etwas niedrigeres als Chrom 14.0.833. Der Text sieht glatt aus. Entfernen Sie den Textschatten und die Schrift sieht gezackt aus. In Chrome 14.0.833 (Update: Es erscheint in 14.0.834 auch "kaputt") funktioniert dies nicht mehr. Die Eigenschaft von Text-Shadow funktioniert immer noch, aber nicht so, wie es zuvor getan wurde. Sie können das Verhalten sehen hier (Laden Sie es einfach mit Diff. Chromversionen) Es scheint, als ob in den älteren Chromes der Textschatten im Text nur ein wenig begann und sich dann ausbreiten kann - weshalb der Text -Shadow -Hack vielleicht funktioniert hat. Im neueren Chrom scheint der Textschatten gerade zu beginnen außen Der Text, deshalb wird er nicht funktionieren. Verstehst du, was ich meine hier.

Meine Frage ist im Grunde: Ist das ein Fehler? Welches ist erwartet, wenn beides zu erwarten ist? Gibt es noch andere Schriftarten, die ich verwenden kann?

Die W3Cs Spezifikation Es schien nicht zu sagen, was das beabsichtigte Verhalten ist, obwohl ich gesehen habe, dass ich vielleicht eine Textzeile verwenden sollte (was irgendwie nicht unterstützt wird, was den Zweck besiegt)

Answer 1

Nun, ich habe es herausgefunden, irgendwie. Nervig, da ich ein Kopfgeld festgelegt habe, aber was auch immer. Ich bin mir ziemlich sicher, dass dies kein Fehler ist, und es wird ein Verhalten erwartet - zumal wir einige weitere Iterationen von Chrome gesehen haben und es gleich geblieben ist. Einige verschiedene Methoden funktionieren. Ich habe ein wenig für meinen Blog geschrieben. Sie können den vollständigen Artikel sehen hier, aber hier ist der Großteil davon:

Zuerst habe ich das ausprobiert -webkit-text-stroke:1px #000 wo #000 ist die Farbe des Textes. Dieser Stil ist jedoch für die Verwendung der Farbe des Textes gedacht, wo sich die Farbe des Textes vom Schlaganfall unterscheidet, für eine schöne Textausliste. Wenn beide die gleiche Farbe haben, sieht es ... seltsam aus. Ich bin mir nicht sicher warum; Ich bin kein Experte für Schriftrender. Sie können das Verhalten im Bild nach dem Artikel sehen.

Als nächstes habe ich ein einfaches versucht text-shadow:#000 0 0 1px wo #000 ist die gleiche Farbe wie der Text. Aufgrund des gleichen Chrom -Problems von 14.0.833+ sieht die Schriftart noch etwas gezackt aus. Es ist jedoch besser als nur ein einfacher Text.

Als nächstes habe ich die beiden obigen Versuche kombiniert. Dies sieht ein bisschen besser aus, aber es verdampft den Text hoch, da es im Wesentlichen 2 Pixel zum Denken des Textes hinzufügt.

Zuletzt habe ich versucht, zwei Textschatten anzuwenden: text-shadow:#000 0 1px 1px,#000 0 -1px 1px >> wo #000 ist die Farbe des Textes. Dies anwendet zwei Textschatten, von denen einer ein wenig nach unten gedrückt wird und der andere nach oben gedrückt wird. Auf diese Weise deckt der Textschatten die gezackten Kanten ab. Es verdampft den Text ein wenig, glättet ihn definitiv aus.

Abhängig von der Größe Ihres Textes funktionieren verschiedene Methoden. Kleinerer (aber immer noch gezackter) Text könnte den Text-Shadow verwenden, größerer Text könnte die Schatten-/Hub-Methode verwenden, und ein sehr großer Text könnte die Dual-Shadow-Methode verwenden. Natürlich desto größer der Text desto weniger spürbar die zusätzlichen Pixel werden. Sie können all die verschiedenen Methoden sehen hier

Answer 2

Okay, ich habe ziemlich viel Zeit damit verbracht und darauf kommt es an: Es ist ein Fehler.

Zuerst, -webkit-font-smoothing:antialiased; Funktioniert nur für Mac, nicht für Windows.

Ich bin auf Windows7, ich habe ein geschichtetes Pixlr-Bild mit Screenshots einer JSFIDDLE erstellt, die ich gemacht habe, die 4 verschiedene Elemente mit unterschiedlichen Textschatten hatte, die jeweils angewendet wurden. Sie können deutlich sehen, dass sich die Textschatten seit Chrome13 und Chrome 14.0.835 geändert hat. Ich musste ein paar Mal zwischen dem Beta- und Dev -Kanal wechseln, weil ich durcheinander gebracht, deinstallieren usw. ugh.

Laden Sie die geschichtete PIXLR -Bilddatei herunter, aus der ich gemacht habe:

http://dl.dropbox.com/u/7353877/chrome-text-shadow-v13-v14_0_835.pxd

Dann geh zu http://pixlr.com/editor/ und wählen Sie die Datei vom Computer aus, öffnen Sie die Datei. Zoomen Sie nun in Pixlr in die vier Textreihen, klicken Sie in der Ebene in der oberen Ebene auf das Kontrollkästchen und deaktivieren Sie es. Überprüfen Sie es dann erneut, tun Sie es immer wieder und sehen Sie, wie drastisch die Änderung in Textschatten ist.

Dies sollte als Fehler eingereicht werden. Ein Link zurück zu dieser Seite könnte verwendet werden, um den Effekt bei Bedarf anzuzeigen.

JSFIDDLE (die JSFiddle, die ich in den Screenshots verwendet habe)http://jsfiddle.net/nicktheandroid/xkp9q/

Ich habe vor anderthalb Stunden ein Stück Kuchen in die Mikrowelle gesteckt ... es ist kalt :(

Answer 3

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

ODER

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

Getestet und funktioniert gut in verschiedenen Versionen von Opera, Chrome, Safari & Firefox.

Answer 4

-webkit-font-smoothing:antialiased; 

könnte für Sie funktionieren

Answer 5

JAWOHL! Ich habe eine Lösung für dieses Problem gefunden. Es ist komisch, aber es funktioniert für mich.

Damit es funktioniert, setzen Sie diesen Stil auf das Element, das Sie glatt haben möchten:

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

Ich habe eine aufgestellt Beispiel HTML -Datei Mit diesem Stil können Sie es schnell testen.

Answer 6

So sahen viele Webfonts (Google WebFonts und auch hochprofessionelle Schriftarten von Typkit usw.) in Firefox (links) und Google Chrome (rechts) auf Windows -Systemen (und schließlich auch an anderer Stelle) aus. Kein Witz! Um dies zu verdeutlichen: Der einzige Browser, der Google WebFonts vollständig durcheinander brachte, war Googles Browser Chrome. Wie krank ist das? Im Jahr 2013 hat der Opera -Browser seine Rendering -Engine auf Webkit (= den Rending -Engine in Chrome) umgestellt, sodass auch dieses Problem in der Opera vorhanden ist.

mehr : http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/