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.:

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:

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:

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

POSITIVES BEISPIEL:

Oben: Firefox 23, unten: Chrome 29

NEGATIVES BEISPIEL: Chrome 30

NEGATIVES BEISPIEL: Chrome 29

Lösung

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

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.

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');
  }
}

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

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 .

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.

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

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

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:

Dazu:

(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 -webkit-backface-visibility: hidden;

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.