it-swarm.com.de

Google Webfonts werden in Chrome unter Windows abgehackt

Ich benutze den Google Webfonts-Dienst auf meiner Website und verlasse mich stark darauf. In den meisten Browsern wird es einwandfrei dargestellt, in Chrome unter Windows jedoch besonders schlecht. Sehr abgehackt und verpixelt.

Was ich bisher herausgefunden habe, ist, dass Chrome die Schriftart im .svg-Format zuerst laden muss. Die Schriftart, die ich jedoch verwende, heißt Asap, war nur in .woff verfügbar. Ich habe es mit einem kostenlosen Onlinedienst in .svg konvertiert, aber als ich das zu meinem Stylesheet (vor dem .woff) hinzufügte, änderte es nichts.

Ich habe auch versucht: 

-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;

In der Hoffnung, dass entweder der Text reibungsloser rendern würde. 

Im Moment sind mir die Ideen ausgehen und ich würde es hassen, Schriftarten zu ändern. Hat jemand eine Idee, wie ich dieses Problem lösen kann? Ich habe das Adobe Browserlab verwendet, um das Rendering zu testen, da ich nur einen Mac besitze. Der Link zur Website ist: www.symvoli.nl/about

Danke im Voraus!

Edit 11. April 2013:

Chrome 35 Beta scheint dieses Problem endlich gelöst zu haben:

enter image description here

50
Joey

Update August 2014

Google behebt dieses Problem endlich nativ in Chrome 37 !!!. Aus historischen Gründen werde ich diese Antwort jedoch nicht löschen.

Problem

Das Problem wurde erstellt, weil chrome TrueType-Schriftarten mit korrektem Anti-Aliasing tatsächlich nicht darstellen können. Allerdings macht Chrome SVG-Dateien immer noch gut. Wenn Sie den Aufruf für Ihre SVG-Datei in Ihrer Syntax oberhalb des Woffs verschieben, lädt Chrome das SVG herunter und verwendet es anstelle der Woff-Datei. Einige Tricks wie Sie schlagen vor, funktionieren jedoch nur bei bestimmten Schriftgrößen.

Dieser Fehler ist jedoch dem Chrome-Entwicklerteam sehr bekannt und wird seit Juli 2012 behoben. Siehe den offiziellen Fehlerbericht-Thread hier: https://code.google.com/p/chromium/issues/detail? id = 137692

Update Oktober 2013 (Danke an @ Catch22)

Anscheinend kann es bei einigen Websites zu Problemen mit intermittierenden Abständen kommen, wenn das svg gerendert wird. Es gibt also einen besseren Weg es zu enthäuten. Wenn Sie svg mit einer für Chrome spezifischen Medienabfrage aufrufen, werden die Abstandsprobleme nicht mehr angezeigt:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.svg#svgFontName') format('svg');
  }
}

Erste Lösungsansatz:

Die kugelsichere Syntax von Fontspring wurde so geändert, dass sie zuerst der svg-Funktion dient:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.svg#svgFontName') format('svg'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf')  format('truetype');
}

Lesen Sie weiter:

66
Tom Sarduy
-webkit-text-stroke: 0.5px;

verwenden Sie es nur für großen Text, da dies die Leistung Ihrer Seite beeinflusst.

18
Daniel Sachs

Ein Update wurde hier vorgeschlagen, indem zuerst die .svg -Datei aufgerufen wurde: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

8
cmccarra

Ich habe eine Reihe von Lösungen ausprobiert und schließlich eine gefunden, die mit neueren Versionen von Chrome funktioniert, die nicht dazu neigen, die Reihenfolge der Dateien zu ändern:

Im Wesentlichen habe ich die TTF-Datei in einen Mozilla-spezifischen Abschnitt verschoben.

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.svg#svgFontName') format('svg'),
         url('webfont.woff') format('woff');
}
@-moz-font-face {
    font-family: 'MyWebFont';    
    src: url('webfont.ttf')  format('truetype');
}
4
Josh Brown

Antwort von Tom & font-spring tat es aus irgendeinem Grund nicht für mich. Dieses Update von Sam Goddard hat jedoch Folgendes getan:

Nachdem ich mich selbst experimentiert hatte, stieß ich auf eine scheinbar einfache und sehr einfache Lösung für dieses Problem. Es scheint, dass Chrome die .svg-Datei im @ font-face-Kit verwendet und es nicht gefällt, als letztes aufgerufen zu werden. Nachfolgend finden Sie den Standardaufruf für @ font-face mit CSS:

// font-face inclusion
@font-face {
  font-family: 'font-name';
                src: url('path-to-font/font-name.eot');
                src: url('path-to-font/font-name.eot?#iefix') format('eot'),
                url('path-to-font/font-name.woff') format('woff'),
                url('path-to-font/font-name.ttf') format('truetype'),
                url('path-to-font/font-name.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

Wie im Beispiel zu sehen ist, wird die .svg-Datei in der Liste der aufgerufenen URLs als letztes angezeigt. Wenn wir den Code so ändern, dass er auf Webkit-Browser abzielt, weisen Sie ihn an, die .svg-Datei ausschließlich zu verwenden.

// Usage
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: ‘font-name';
    src: url(‘path-to-font/font-name.svg’) format(‘svg’);
    }
}
2
Prae

Es könnte nur die Schriftart sein, die Sie verwenden, wenn Sie "so schnell wie möglich" bei bestimmten Größen nicht so gut darstellen. Ich habe die Größe Ihres h1 von 3.5em in 50px geändert, und es sieht etwas besser aus. Vielleicht nicht die perfekte Lösung, aber ich habe festgestellt, dass viele Google-Webfonts unvorhersehbar sein können

1
Keith

Hatte das gleiche, Jungs. Gut in allen Browsern außer Chrome - sogar IE10 und 9 waren in Ordnung. Dreamwaeevr CS6 verwendet auch eine ähnliche Version von fontsprings-Code, hat jedoch das svg am Ende. Ändern Sie es für SVG vor Woff und TTF und alles in der Welt ist gut. Tom ist mit dem Beispiel hos beschäftigt, in der Tat, in Ihrem Code und in den Pfadpfaden zu den Schriftarten, die Sie benötigen, und Sie sind im Geschäft!

0
Simon Pointer

Eine weitere Linkreferenz für das Rendern von Webschriften in Chrome -

http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

0
VGruenhagen

Es scheint, dass Google je nach Browser und Betriebssystem unterschiedliche Woff-Dateien bereitstellt. 

Ich habe festgestellt, dass, wenn ich die Schriftart vom IE herunterlade, diese um etwa 10 KB größer ist als bei Safari vom Mac für eine bestimmte Schriftart. 43k gegen 33k. Auch scheint die IE -Version auf dem Mac gut auszusehen, die Mac-Version scheint jedoch auf dem PC nicht zu funktionieren. Die Mac-Version sieht in Mozilla Firefox auf dem PC am schlechtesten aus.

Versuchen Sie Folgendes: http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic600italic

SourceSansPro-Regular.woff PC-Version 27k

SourceSansPro-Regular.woff Apple-Version 24k

0
Rick Paul

ich habe viele Möglichkeiten ausprobiert: - Laden der svg mit font-face - webkit-font-smoothening ...

nach dem

-webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0);

das Drehen war glatter, aber das Hauptproblem ist nicht verschwunden.

Für mich fügte die Lösung hinzu:

-webkit-text-stroke: 0.5px;
0
xs1337gx

https://www.gettingthingstech.com/how-to-fix-jagged-font-rendering-in-google-chrome/

In diesem Beitrag werden die experimentellen Funktionen von Google Chromes erläutert. Wenn Sie die Option "DisableWrite" aktivieren, werden die gezackten Schriftarten korrigiert. Dies ist offensichtlich eine fixe PER-Maschine und nicht in vollem Umfang.

0
zakpucci

Ich entwickle in Firefox. Meine Erfahrung ist, dass FF ttf-Schriftarten sehr gut ohne zusätzliche Regeln anzeigt (jenseits des @ font-face, das die URL für die Schriftartdatei aufruft). Chrome ist jedoch eine andere Geschichte. Selbst mit der -webkit-Schriftglättung: Antialias; In der Regel wird jede Schriftart ziemlich unregelmäßig angezeigt. Safari scheint dieses Problem nicht zu haben, daher ist es nicht inhärent ein Webkit, das eine Schrift nicht sauber rendern kann, sondern ein Chrome-Problem. 

Ich habe nicht versucht, den -webkit-Text-Strich hinzuzufügen: 0.5px; Regel, aber wird.

Von den Antworten oben mag ich die Antwort von Tom Sarduy am besten. Abgesehen von einer guten Beschreibung des Problems bietet er einen großen @ font-face-Stack, der für alle wichtigen Browser verwendet werden kann.

0
Max West