Warum werden Google Web Fonts nicht ordnungsgemäß dargestellt, wenn sie direkt mit @fontface im Stylesheet verwendet werden?

Question

Ich habe kürzlich damit gekämpft, glatte Google Web Fonts zu erreichen, hauptsächlich auf Windows Google Chrome.

Früher hatte ich den direkten Stylesheet-Code verwendet, der von der URL gerissen wurde, die Google Web Fonts bereitstellt, z.B. Google bereitstellt:

Also gehe ich zur URL und benutze den folgenden Code:

@font-face {
   font-family: 'Titillium Web';
   font-style: normal;
   font-weight: 200;
   src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr-K9kSItTeDn2USN0q77Oh4.woff) format('woff');
}

Ich dachte, dies sei eine clevere Möglichkeit, um etwas mehr Geschwindigkeit zu sparen, anstatt eine Anfrage an Google zu stellen, die dann anscheinend eine weitere Anfrage zur Quelle der Schriftart macht.

Ich habe kürzlich entdeckt, dass dies die Ursache für die Darstellungsprobleme war (siehe das folgende Beispiel, wie der Windows Chrome-Browser auf der Web Font-Seite rendert verglichen mit einer Testseite, die ich mit dem Prozess erstellt habe: http://imgur.com/OV2U1,ema2B)

Meine Frage ist, warum macht die Version die Schriftart glatt, wenn sie die gleiche Schriftart mit meiner Kurzform-Methode besorgt? Und auch, gibt es einen Grund, warum ich diesen Ansatz verwenden sollte, von dem ich dachte, dass er die Anforderungszeiten verkürzen würde?

Answer 1

Es gibt einige Probleme, die Ihre Frage beantworten könnten. Der Hauptgrund ist, dass die verlinkte URL tatsächlich unterschiedliche CSS für verschiedene Browser anzeigt. Wenn Sie sie also in Chrome öffnen und dieses CSS kopieren, könnte es in Internet Explorer (insbesondere vor Version 9) nicht funktionieren.

Außerdem verwenden Sie eine Schriftgrad von 200, was ein "leichtes" Gewicht ist. Der Standard für normalen Text beträgt 400. Es besteht also die Möglichkeit, dass bestimmte Browser die Schrift einfach nicht anzeigen, es sei denn, Sie geben explizit einen Schriftgrad von 200 an. Etwas wie dies hier sollte helfen:

body {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
}

Answer 2

Fügen Sie dies zu Ihrer CSS-Datei hinzu:

@import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');