Ich habe ein paar Abende damit verbracht, herauszufinden, wie man @ font-face am besten mit modernen Browsern implementieren kann. Ich bin ein Vollzeit Web / Systementwickler mit einem Hintergrund als Grafikdesigner Ich finde die Möglichkeiten und Möglichkeiten mit Webdesign immer interessanter. Also habe ich ein paar Tests gemacht und würde gerne hören, ob irgendjemand Ratschläge, bessere Ideen oder Inputs dazu hat. Mein Testszenario sieht so aus.

Ich habe mit vielen verschiedenen Online-Tools und -Anwendungen getestet, aber am Ende habe ich das auf einen Online-Service und eine Anwendung reduziert.

• FontSquirrel, Online-Tool - kostenlos. Ссылка
• FontXChange, Anwendung für Mac / Win - 99 $. Ссылка

Ich benutzte eine Schriftart, die mit meinem Mac, Tamil Sangam MN und Tamil Sangam MN Bold, beide als offener Typ, .otf ausgeliefert wurden.

• TamilSangamMN.otf - 290 KB
• TamilSangamMNBold.otf - 271 KB

Umwandlungsgrößen untersuchen

FontSquirrel

Dies ist ein gutes Online-Tool, es ist sehr gut. Es gibt ein paar verschiedene Modi und ich habe die Basic und Optimal verwendet. Die Ausgabe meiner .otf-Datei war svg, ttf, eot und woff.

Einfach

Regulär

• TamilSangamMN.svg 233 KB
• TamilSangamMN.ttf 71 KB
• TamilSangamMN.eot 25 KB
• TamilSangamMN.woff 30 KB
• Gesamt: 359 KB

Fett

• TamilSangamMNbold.svg 225 KB
• TamilSangamMNbold.ttf 69 KB
• TamilSangamMNbold.eot 25 KB
• TamilSangamMNbold.woff 30 KB
• Gesamt: 349 KB

Optimal

Das erste, was mir bei den optimalen Schriften aufgefallen ist, ist, dass sie wesentlich kleiner sind als die Basisvarianten ~ 260 KB!

Regulär

• TamilSangamMN.svg 33 KB
• TamilSangamMN.ttf 25 KB
• TamilSangamMN.eot 15 KB
• TamilSangamMN.woff 17 KB
• Gesamt: 90 KB

Fett

• TamilSangamMNbold.svg 33 KB
• TamilSangamMNbold.ttf 25 KB
• TamilSangamMNbold.eot 15 KB
• TamilSangamMNbold.woff 17 KB
• Gesamt: 90 KB

FontXChange

Dieses Tool kann so viel mehr, als nur Schriften für das Web zu jonglieren. Es kann mehrere Formate untereinander konvertieren; wie Opentype, True Type, Webfonts, Postscript und so weiter. Das Ergebnis ist insgesamt sehr hohe Qualität der Dateien sind so groß, fast doppelt so groß wie FontSquirrels Basic-Versionen und über 7-mal größer als FontSquirrels Optimal Version.

Regulär

• TamilSangamMN.svg 480 KB
• TamilSangamMN.ttf 72 KB
• TamilSangamMN.eot 72 KB
• TamilSangamMN.woff 80 KB
• Gesamt: 704 KB

Fett

• TamilSangamMNbold.svg 463 KB
• TamilSangamMNbold.ttf 69 KB
• TamilSangamMNbold.eot 70 KB
• TamilSangamMNbold.woff 80 KB
• Gesamt: 682 KB

Einrichten des CSS

Es hat mich am Anfang etwas verwirrt, dass die Reihenfolge in der Fontliste wichtig war. Dann entdeckte ich, dass einige das erste Format verwenden, das sie für kompatibel hält, anstatt sich an das Format zu halten, das optimal ist - und es ist nervig. Nach einigen Labors habe ich festgestellt, dass dies die optimale Methode ist, um CSS zu formatieren (beachten Sie die Reihenfolge der Dateitypen | wichtig! ).

Meine Testergebnisse

Reguläre Schriften

Ich habe die beste Version mit einem * markiert

Firefox MAC (15.0.1)

• FontSquirrel Optimal: Rendert ein bisschen zu fett
• FontSquirrel Basic: Rendert ein bisschen zu dick
• FontXChange 4.0: Rendert etwas zu fett, aber das Kerning ist besser als die FontSquirrel-Version *

Firefox Windows (15.0.1)

• FontSquirrel Optimal: Rendert sehr nett
• FontSquirrel Basic: Font wird gezackt / abgehackt
• FontXChange 4.0: Rendert sehr nett *

Safari Mac (6.0)

• FontSquirrel Optimal: Perfekter Render
• FontSquirrel Basic: Perfekter Render
• FontXChange 4.0: Perfekter Render * *

Chrome Mac (21.0)

• FontSquirrel Optimal: Ein bisschen fett
• FontSquirrel Basic: Ein bisschen fett
• FontXChange 4.0: Perfekter Render * *

Chrome Windows (21.0)

• FontSquirrel Optimal: Perfekter Render
• FontSquirrel Basic: Perfekter Render
• FontXChange 4.0: Perfekter Render * *

Internet Explorer (9.0)

• FontSquirrel Optimal: Perfekter Render *
• FontSquirrel Basic: Perfekter Render
• FontXChange 4.0: Font wird gezackt / abgehackt

Fettschrift

Firefox MAC (15.0.1)

• FontSquirrel Optimal: Rendert sehr fett *
• FontSquirrel Basic: Rendert sehr fett
• FontXChange 4.0: Rendert sehr fett, aber besser Kerning (Ich möchte dieses für den Mac auswählen, aber da die Windows-Version von Firefox hier nicht kompatibel ist, muss es gehen)

Firefox Windows (15.0.1)

• FontSquirrel Optimal: Rendering ok, nicht sehr antialiased *
• FontSquirrel Basic: Font wird gezackt / abgehackt
• FontXChange 4.0: Font wird etwas verzerrt / gezackt

Safari Mac (6.0)

• FontSquirrel Optimal: Perfekter Render *
• FontSquirrel Basic: Perfekter Render
• FontXChange 4.0: Rendert Fett

Chrome Mac (21.0)

• FontSquirrel Optimal: Perfekter Render *
• FontSquirrel Basic: Guter Render, ein paar Prozent zu dick
• FontXChange 4.0: Rendert Fett

Chrome Windows (21.0)

• FontSquirrel Optimal: Perfekter Render *
• FontSquirrel Basic: Perfekter Render
• FontXChange 4.0: Rendert sehr fett

Internet Explorer (9.0)

• FontSquirrel Optimal: Perfekter Render *
• FontSquirrel Basic: Perfekter Render
• FontXChange 4.0: Font wird gezackt / abgehackt

Die endgültige Implementierung

Normalerweise ordne ich meine Webfonts in folgendem Muster an: & lt; webfonts & gt; / & lt; Umwandlungsquelle & gt; / & lt; Umwandlungsmethode & gt; / & lt; Schriftarten & gt;

Grafische Übersicht des Ergebnisses (Fullsize in Ссылка )

Schlussfolgerungen und Aufgaben

Es gibt kein einziges Tool, das Schriften liefert, die in allen Browsern auf dem Mac und Windows angezeigt werden. Sie müssen für jede Schriftart experimentieren und testen. Die oben beschriebene Methodik ist nur ein einfacher Weg und Vorschlag, wie Sie mit @ font-face's testen und experimentieren können.

Gibt es etwas, von dem Sie glauben, dass ich meine Methoden oder Implementierung ändern könnte? Gibt es eine Anwendung oder einen Service, die ich vermisst habe?

Alles Gute / T