Rendern von Raleway (Google Web Fonts) im Google Chrome-Browser

7

Ich verwende Windows 7 und habe ein Problem mit einer der Google-Schriftarten: Raleway . Ich habe es überprüft und diese Schriftart sieht in Firefox (Version 34) sehr gut aus, aber in Google Chrome (Version 39) sieht sie auf meinem Computer schrecklich aus. Manchmal kann ich den Text nicht lesen.

Ich habe Raleway Google Web Fonts dank dieses Links heruntergeladen :

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway%3A200%2C300%2C400%2C500%2C600%2C700&#038;subset=latin">

Druckbildschirme (Windows 7):

Google Web Font: Raleway in Google Chrome 39

GWF Raleway in Google Chrome (Windows 7)

Google Web Font: Raleway in Firefox 34

Geben Sie hier die Bildbeschreibung ein

Raleway, Google Web Font finden Sie unter http://www.google.com/fonts/specimen/Raleway

fonts google-chrome windows windows-7 Cichy
quelle
Es gibt auch einige Probleme mit Chrome- und Google-Schriftarten. Um dieses Problem zu lösen, können Sie Folgendes tun: Laden Sie alle Formulare herunter [woff, ttf, svg usw.], erstellen Sie ein Font Face Kit und rufen Sie es mit @ font-face in der CSS-Datei auf. Laden Sie auch das Font Face Kit auf Ihren Server hoch.
Helping Hands
Die Google-Datei enthält CSS-Code , mit dem die erforderlichen Schriftdateien heruntergeladen werden (z. B. in Chrome " .woff2 "). Ein Teil dieses Codes ist unten. Ich verstehe nicht, was der Unterschied zwischen der Verwendung von Schriftdateien vom Google-Server und von meinem Server ist, wenn das Funktionsprinzip dasselbe ist. Auf der anderen Seite verwende ich es im WP-Design, wo der Benutzer die Schriftart ändern kann und nicht alle Google-Schriftarten in das WP-Design einbinden kann. Deshalb muss ich eine Standardlösung verwenden, die einen Link zu CSS (mit @ font-face ) verwendet, der von generiert wird fonts.googleapis.com .
Cichy
Übrigens in der CSS-Datei von fonts.googleapis.com, wenn ich sie in Chrome starte. Ich habe folgenden Code:@font-face {(...) src: local('Raleway'), url(http://fonts.gstatic.com/raleway/(...)N8.woff2) format('woff2');
Cichy
Ich sehe das überhaupt nicht. Ist es behoben? Wenn nicht, können Sie mir einen Link zu einer Beispielseite geben?
Daniel F
Ich möchte hinzufügen, dass ich dieses Problem auf meinen Computern habe (überall dort, wo ich die Raleway-Schriftart sehe), aber auf anderen Computern sehe ich dieses Problem nicht: |
Cichy

Antworten:

4

Dies ist ein bekanntes Problem bei Raleway und einigen Versionen von Chrome. Es hängt mit dem Anti-Aliasing von Schriftarten zusammen. Dies ist ein Fix für Windows, bei dem SVG im CSS verwendet wird

/*FIX FONT FOR GOOGLE CHROME ON WINDOWS*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;}
 }

Dies kann dazu führen, dass die Dinge auf einem Mac noch schlimmer aussehen, sodass Sie HTTP-Header codieren können, um dies nur für Windows- Anweisungen zu ändern

Dieser Vorschlag html { -webkit-text-stroke: 0.25px}von Superuser sieht vielversprechend aus.

Diese Lösung von stackoverflow erklärt, wie Sie Probleme mit lokal installierten Google-Schriftarten und Chrome-Rendering umgehen können.

Chrome-Fehlerbericht und Neuigkeiten zu Chrome 37, die das Problem beheben

Mousey
quelle