Gibt es in Google Chrome eine "Schriftglättung"?

141

Ich verwende Google Webfonts und sie eignen sich gut für super große Schriftgrößen, aber bei 18px sehen sie schrecklich aus. Ich habe hier und da gelesen, dass es Lösungen für die Glättung von Schriftarten gibt, aber ich habe keine gefunden, die dies klar erklärt, und die wenigen Schnipsel, die ich gefunden habe, funktionieren überhaupt nicht.

Mein h4sieht in so ziemlich jedem Browser schrecklich aus, aber Chrome ist das Schlimmste. In Chrome sehen so ziemlich alle meine Schriftarten schrecklich aus.

Kann mich jemand in die richtige Richtung weisen? Vielleicht kennen Sie eine Ressource, die dies klar erklärt? Vielen Dank!

BEISPIEL SCREENSHOT # 1

Dieser Screenshot zeigt die Homepage von https://www.dartlang.org/ , einer Programmiersprache, die von Google erstellt wurde (wir können also implizieren, dass diese Website auch von Google erstellt wurde) und Google Webfonts verwendet.

Der Screenshot zeigt links Google Chrome, rechts Firefox / Internet Explorer.:

Google Chrome links, Firefox / Internet Explorer rechts

BEISPIEL SCREENSHOT # 2

Dieser Screenshot zeigt eine Produktinfoseite auf Adobe.com mit den von Typekit bereitgestellten Webfonts. Adobe & Typekit sind Profis, wenn es um Schriftarten geht.

Der Screenshot zeigt rechts Google Chrome, links Firefox / Internet Explorer:

Google Chrome links, Firefox / Internet Explorer rechts

imakeitpretty
quelle
Sie sehen für mich in Chrom und Firefox gut aus. Könnten Sie einen Druckbildschirm hinzufügen?
JFK
Auch auf iPhone / iOS sehen sie sehr gut aus.
Insertusernamehere
Verwenden Sie Windows? In diesem Fall ist möglicherweise die ClearType-Glättungs-Engine des Betriebssystems die Ursache. Ich habe diese Seite zusätzlich zu Windows unter Mac OS, Ubuntu, Fedora und Chrome OS ausprobiert. Letzteres ist das einzige, das nicht richtig gerendert wird, da ich vermute, dass es sich um die ClearType-Engine handelt.
Jules
Ja, es sind Fenster. Wissen Sie, was ich dagegen tun kann?
imakeitpretty
habe gerade diese nützliche Funktion entdeckt: chrome: // flags / # lcd-text-aa - aktiviere es und es glättet Text für dich
cinek

Antworten:

162

Status des Problems, Juni 2014: Mit Chrome 37 behoben

Schließlich wird das Chrome-Team einen Fix für dieses Problem mit Chrome 37 veröffentlichen, der im Juli 2014 veröffentlicht wird. Einen Vergleich des aktuellen stabilen Chrome 35 und des neuesten Chrome 37 (Vorschau auf die frühe Entwicklung) finden Sie hier:

Geben Sie hier die Bildbeschreibung ein

Stand der Ausgabe, Dezember 2013

1.) Es gibt KEINE richtige Lösung beim Laden Schriftarten über @import, <link href=oder Google webfont.js. Das Problem ist, dass Chrome einfach .woff- Dateien von der Google-API anfordert, die schrecklich gerendert werden. Überraschenderweise werden alle anderen Schriftdateitypen wunderbar gerendert. Es gibt jedoch einige CSS-Tricks, die die gerenderte Schriftart ein wenig "glätten". Die Problemumgehung (en) finden Sie tiefer in dieser Antwort.

2.) Es gibt eine echte Lösung für dieses Problem, wenn Sie die Schriftarten selbst hosten, die zuerst von Jaime Fernandez in einer anderen Antwort auf dieser Stackoverflow-Seite veröffentlicht wurden. Dieses Problem wird behoben, indem Web-Schriftarten in einer speziellen Reihenfolge geladen werden. Ich würde mich schlecht fühlen, wenn ich einfach seine ausgezeichnete Antwort kopieren würde, also schauen Sie bitte dort nach. Es gibt auch eine (nicht bewährte) Lösung, die empfiehlt, nur TTF / OTF-Schriftarten zu verwenden, da diese jetzt von fast allen Browsern unterstützt werden.

3.) Das Google Chrome-Entwicklerteam arbeitet an diesem Problem. Da es einige große Änderungen in der Rendering-Engine gegeben hat, ist offensichtlich etwas im Gange.

Ich habe einen großen Blog-Beitrag zu diesem Thema geschrieben. Schauen Sie sich das an: So beheben Sie das hässliche Rendern von Schriftarten in Google Chrome

Reproduzierbare Beispiele

Sehen Sie, wie das Beispiel aus der ersten Frage heute in Chrome 29 aussieht:

POSITIVES BEISPIEL:

Links: Firefox 23, rechts: Chrome 29

Geben Sie hier die Bildbeschreibung ein

POSITIVES BEISPIEL:

Oben: Firefox 23, unten: Chrome 29

Geben Sie hier die Bildbeschreibung ein

NEGATIVES BEISPIEL: Chrome 30

Geben Sie hier die Bildbeschreibung ein

NEGATIVES BEISPIEL: Chrome 29

Geben Sie hier die Bildbeschreibung ein

Lösung

Behebung des obigen Screenshots mit -webkit-text-Stroke:

Geben Sie hier die Bildbeschreibung ein

Die erste Zeile ist Standard, die zweite hat:

-webkit-text-stroke: 0.3px;

Die dritte Reihe hat:

-webkit-text-stroke: 0.6px;

Der Weg, um diese Schriftarten zu reparieren, besteht darin, sie einfach zu geben

-webkit-text-stroke: 0.Xpx;

oder die RGBa-Syntax (von nezroy, in den Kommentaren zu finden! Danke!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

Es gibt auch eine veraltete Möglichkeit : Geben Sie dem Text einen einfachen (falschen) Schatten:

text-shadow: #fff 0px 1px 1px;

RGBa-Lösung (gefunden in Jasper Espejos Blog):

text-shadow: 0 0 1px rgba(51,51,51,0.2);

Ich habe einen Blog-Beitrag dazu geschrieben:

Wenn Sie über dieses Problem informiert werden möchten, lesen Sie den entsprechenden Blog-Beitrag: So beheben Sie das hässliche Rendern von Schriftarten in Google Chrome . Ich werde Neuigkeiten veröffentlichen, wenn es Neuigkeiten dazu gibt.

Meine ursprüngliche Antwort:

Dies ist ein großer Fehler in Google Chrome, und das Google Chrome-Team weiß davon. Den offiziellen Fehlerbericht finden Sie hier . Derzeit, im Mai 2013, selbst 11 Monate nachdem der Fehler gemeldet wurde, ist er nicht behoben. Es ist seltsam, dass der einzige Browser, der Google Webfonts durcheinander bringt, Googles eigener Browser Chrome (!) Ist. Es gibt jedoch eine einfache Problemumgehung, mit der das Problem behoben werden kann. Die Lösung finden Sie weiter unten.

ERKLÄRUNG DES GOOGLE CHROME DEVELOPMENT TEAM, MAI 2013

Offizielle Erklärung im Fehlerbericht Kommentare:

An unserem Windows-Font-Rendering wird aktiv gearbeitet. ... Wir hoffen, innerhalb von ein oder zwei Meilensteinen etwas zu haben, mit dem Entwickler anfangen können zu spielen. Wie schnell es in den Stall geht, hängt wie immer davon ab, wie schnell wir Regressionen ausrotten und niederbrennen können.

Sliq
quelle
1
Das Problem liegt nicht in allen Browsern unter Windows, sondern nur in Chrome. Firefox, Opera und IE verfügen über ein ordnungsgemäßes Anti-Aliasing der Schriftarten. Es kann jedoch mithilfe der -webkit-font-smoothingEigenschaft in Chrom fixiert werden . Siehe meine Antwort unten.
Kushagra
1
Für schwarzen Text habe ich verwendet text-shadow: #333 0px 0px 1px;. Vielen Dank für den Tipp.
Yoone
6
Möglicherweise ist es bei der Übersetzung verloren gegangen, aber -webkit-text-Stroke funktioniert nur, wenn Sie ein Alpha der Farbe der Schriftart verwenden. Für eine schwarze Schrift verwende ich also so etwas wie "-webkit-text-Stroke: 1px rgba (0,0,0,0,1)".
Nezroy
Ich habe festgestellt, dass Chrome 30 auf dem Mac jetzt den gleichen Mangel an Antialiasing aufweist.
Jwadsack
1
Im offiziellen Ticket auf der Chrome-Tafel für dieses Problem code.google.com/p/chromium/issues/detail?id=137692 scheint es als Fix für v37 gedacht zu sein, wenn ich den letzten Beitrag im Thread richtig verstanden habe .
Gruber
46

Ich hatte das gleiche Problem und fand die Lösung in diesem Beitrag von Sam Goddard .

Die Lösung, wenn der Aufruf der Schriftart zweimal definiert werden soll . Erstens, wie empfohlen, für alle Browser und nach einem bestimmten Aufruf nur für Chrome mit einer speziellen Medienabfrage zu verwenden:

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

Geben Sie hier die Bildbeschreibung ein

Mit dieser Methode wird die Schriftart in allen Browsern wiedergegeben. Der einzige negative Punkt, den ich gefunden habe, ist, dass die Schriftartdatei auch zweimal heruntergeladen wird.

Eine spanische Version dieses Artikels finden Sie auf meiner Seite

Jaime Fernandez
quelle
6
Dies ist eigentlich die richtige Antwort, kann aber vereinfacht werden. Das einfache Auflisten der SVG-Version ZUERST in der Liste der Schriftarten löst das Problem ebenfalls!
jduncanator
2
Diese Antwort liefert bei weitem die besten Ergebnisse. Die SVG-Schriftart sieht x100 besser aus als der -webkit-Text-Strich-Hack. Der Hauptnachteil ist die Schriftgröße der SVG-Version; es ist normalerweise viel größer :-( Google muss das wirklich so schnell wie möglich sortieren
Timidfriendly
Ich bin vollkommen einverstanden ! Ich werde aus meiner Antwort heraus auf diese Antwort verlinken.
Sliq
@jduncanator Es ist nicht ratsam, zuerst die SVG-Datei aufzulisten. Dies bedeutet, dass die SVG-Schriftart von jedem einzelnen Browser geladen wird , der sie unterstützt, während Sie sie nur für Chrome unter Windows benötigen.
RoelN
@jduncanator Die beiden Hauptschuldigen sind keine Unterstützung für Hinweise und die große Dateigröße (die gzip-Komprimierung für Schriftarten ist auf vielen Servern standardmäßig nicht aktiviert).
RoelN
22

Chrome rendert die Schriftarten nicht wie Firefox oder ein anderer Browser. Dies ist im Allgemeinen ein Problem in Chrome, das nur unter Windows ausgeführt wird. Wenn Sie die Schriftarten glatt machen möchten, verwenden Sie die -webkit-font-smoothingEigenschaft für Ihre h4Tags wie diese.

h4 {
    -webkit-font-smoothing: antialiased;
}

Sie können auch verwenden subpixel-antialiased, dies gibt Ihnen verschiedene Arten der Glättung (wodurch der Text ein wenig verschwommen / schattiert wird). Sie benötigen jedoch eine nächtliche Version, um die Auswirkungen zu sehen. Weitere Informationen zum Glätten von Schriftarten finden Sie hier .

Kushagra
quelle
11
Ich habe die neueste Version Chrome heute 8-feb-2013 und diese Seite hier zeigt keinen Unterschied zwischen ihnen maxvoltar.com/sandbox/fontsmoothing
thednp
4
Dies funktioniert nicht (unter Windows getestet). Da Macs dies sowieso tun, habe ich mich markiert, um die Leute davon abzubringen, es zu benutzen.
KryptoniteDove
4
Das funktioniert nicht. Ich habe es gerade unter Windows 8 ausprobiert. Mit der neuesten Version von Chrome (Stand 08.10.2013).
Jay_t55
3
Unter Mac Chrome und Safari funktioniert dies, daher lohnt es sich, es hinzuzufügen. Apple.com verwendet es sogar in ihrem base.css-Stylesheet:body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; -webkit-font-smoothing: antialiased; }
Justin
1
Das Firefox-Äquivalent ist -moz-osx-font-Smoothing: Graustufen;
Jeff Walters
14

Ok, du kannst das einfach benutzen

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

Stellen Sie sicher, dass Ihre Textfarbe und die obere Strichbreite gleich sind und das war's.

Rishabh Gupta
quelle
Die Schriftglättung bewirkt nichts mehr, aber der Strich funktioniert und kann bei einigen Schriftarten hilfreich sein. Ich schien die besten Ergebnisse mit einem 0,5-Pixel-Strich und rgba (0,0,0,0,5) zu erzielen.
Moss
Das Firefox-Äquivalent ist -moz-osx-font-Smoothing: Graustufen;
Jeff Walters
das ist schön ... ersetze einfach # 34343b durch erben ..;)
Sagive SEO
9

Ich werde vor allem sagen, dass dies nicht immer funktioniert , ich habe dies mit sans-serifSchriftarten und externen Schriftarten wie getestetopen sans

Wenn Sie große Schriftarten verwenden, versuchen Sie manchmal, eine Annäherung an font-size:49pxund eine höhere Schrift zu erreichen

Schriftgröße: 48px

Dies ist ein Kopfzeilentext mit einer Größe von 48 Pixel ( font-size:48px;in dem Element, das den Text enthält).

Wenn Sie jedoch die 48px auf font-size:49px;(und 50px, 60px, 80px usw.) erhöhen, passiert etwas Interessantes

Schriftgröße: 49px

Der Text wird automatisch glatt und scheint wirklich gut zu sein

Für eine andere Seite ...

Wenn Sie nach kleinen Schriftarten suchen, können Sie dies versuchen, sind aber nicht sehr effektiv.

Wenden Sie auf das übergeordnete Element des Textes einfach die nächste CSS-Eigenschaft an: -webkit-backface-visibility: hidden;

Sie können so etwas transformieren:

-webkit-backface-sichtbarkeit: sichtbar;

Dazu:

-webkit-backface-sichtbarkeit: versteckt;

(die Schriftart ist Kreon)

Bedenken Sie, dass, wenn Sie diese Eigenschaft nicht setzen, -webkit-backface-visibility: visible;geerbt wird

Aber seien Sie vorsichtig , diese Übung führt nicht immer zu guten Ergebnissen. Wenn Sie genau hinschauen, lässt Chrome den Text nur ein wenig verschwommen aussehen.

Eine weitere interessante Tatsache:

-webkit-backface-visibility: hidden;funktioniert auch, wenn Sie einen Text in Chrome transformieren (mit der -webkit-transformEigenschaft, die Rotationen, Schrägstellungen usw. enthält).

Ohne

Ohne -webkit-backface-visibility: hidden;

Mit

Mit -webkit-backface-visibility: hidden;

Nun, ich weiß nicht, warum diese Praktiken funktionieren, aber sie funktionieren für mich. Entschuldigung für mein komisches Englisch.

Yavierre
quelle