Konvertierung und Rendering-Webfonts zu base64 - original Look

Question

halten will ich Schriftart Laden auf meiner Website von deferred font loading logic for Smashing Magazine inspiriert verschieben.

Hauptteil dieser wird Schriften Base64 konvertieren und Ihre CSS-Datei mit der Vorbereitung. Meine Schritte so weit:

1. Wählen Sie Schriftarten auf Google Web Fonts und laden Sie sie herunter.
2. Verwenden Font Squirrel Webfont Generator in der Download-TTF-Dateien in CSS-Datei mit Base64 eingebettet WOFF-Schriften (Expertenoptionen -> CSS -> Base64 Encode) zu konvertieren.
3. Laden Sie die CSS-Datei asynchron (nicht wichtig hier).

---

CSS-Schnipsel für Open Sans Bold:

@font-face { 
    font-family: 'Open Sans'; 
    src: url(data:application/x-font-woff;charset=utf-8;base64,<base64_encoded>) format('woff'); 
    font-weight: 700; 
    font-style: normal; 
} 

Das Problem ist, die Schriftarten umgewandelt sieht anders aus. Z.B. hier Open Sans Bold:

Vor allem bemerken Akzente weg und absolut schrecklichen Buchstaben 'a'. Andere Schriftfamilien und -varianten sehen auch sehr merklich anders aus (Verformungen von Größe und Form usw.).

---

Die Frage ist also: Wie codieren Sie richtig TTF-Dateien von Google Web Fonts (oder einer anderen Quelle) zu base64-Format und es verwenden, um das Ergebnis auf die Originaldatei identisch ist?

Answer 1

Stellen Sie in den Font Squirrel Expert-Optionen sicher, dass die Option "TrueType Hinting" auf "Keep Existing" gesetzt ist. Jede der anderen Optionen bewirkt, dass die TrueType-Anweisungen (Hinweise) geändert werden, was sich wiederum auf das Rendern der Schriftart auswirkt.

Alternativ, wenn Sie mit dem Rendern der Schriftart direkt von GWF zufrieden sind, können Sie einfach diese Datei nehmen und die base64-Codierung selbst durchführen. In OS X oder Linux verwenden Sie den eingebauten in base64-Befehl im Terminal/Shell:

$ base64 myfont.ttf > fontbase64.txt

Für Windows, werden Sie ein Programm herunterladen müssen in base64 zu kodieren (es gibt mehrere freie/Open Source Werkzeuge verfügbar). Kopieren Sie den Inhalt der Datei, verwenden Sie dann in Ihrem CSS als:

@font-face { 
    font-family: 'myfont'; 
    src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

(Beachten Sie, dass einige Anpassungen an die verschiedenen @ font-face Informationen machen müssen, um Ihre bestimmten Schriftdaten entsprechen; dies ist nur ein Beispiel Vorlage)