Ich habe ein paar Abende damit verbracht zu untersuchen, wie @ font-face mit den heutigen modernen Browsern am besten implementiert werden kann. Ich bin ein Vollzeit-Web- / Systementwickler mit einem Hintergrund als Grafikdesigner. Ich finde die Möglichkeiten und Möglichkeiten des Webdesigns immer interessanter. Also habe ich ein paar Tests gemacht und würde gerne hören, ob jemand Ratschläge, bessere Ideen oder Anregungen dazu hat. Mein Testszenario sieht so aus.

Ich habe mit VIELEN verschiedenen Online-Tools und -Anwendungen getestet, aber am Ende habe ich dies auf einen Onlinedienst und eine Anwendung reduziert.

FontSquirrel, Online-Tool - kostenlos.http://www.fontsquirrel.com/fontface/generatorFontXChange, Anwendung für Mac / Win - 99 $.http://fontgear.net/fontxchange.html

Ich habe eine Schriftart verwendet, die mit meinem Mac geliefert wurde: Tamil Sangam MN und Tamil Sangam MN Bold.

TamilSangamMN.otf - 290 KBTamilSangamMNBold.otf - 271 KBUntersuchen der Conversion-GrößenFontSquirrel

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

Basic

Regulär

TamilSangamMN.svg233 KBTamilSangamMN.ttf71 KBTamilSangamMN.eot25 KBTamilSangamMN.woff30 KBGesamt: 359 KB

Fett gedruckt

TamilSangamMNbold.svg225 KBTamilSangamMNbold.ttf69 KBTamilSangamMNbold.eot25 KBTamilSangamMNbold.woff30 KBGesamt: 349 KBOptimal

Bei den optimalen Schriften ist mir als erstes aufgefallen, dass sie deutlich kleiner sind als die Basisvarianten ~ 260 KB!

Regulär

TamilSangamMN.svg33 KBTamilSangamMN.ttf25 KBTamilSangamMN.eot15 KBTamilSangamMN.woff17 KBGesamt: 90 KB

Fett gedruckt

TamilSangamMNbold.svg33 KBTamilSangamMNbold.ttf25 KBTamilSangamMNbold.eot15 KBTamilSangamMNbold.woff17 KBGesamt: 90 KBFontXChange

Dieses Tool kann so viel mehr als nur das Jonglieren von Schriftarten für das Web. Es können mehrere Formate untereinander konvertiert werden. wie opentype, true type, web fonts, post script und so weiter. Das Ergebnis ist insgesamt eine sehr hohe Qualität, die Dateien sind so groß, fast doppelt so groß wie die FontSquirrels Basic-Versionen und über 7-mal größer als die FontSquirrels Optimal-Version.

Regulär

TamilSangamMN.svg480 KBTamilSangamMN.ttf72 KBTamilSangamMN.eot72 KBTamilSangamMN.woff80 KBGesamt: 704 KB

Fett gedruckt

TamilSangamMNbold.svg463 KBTamilSangamMNbold.ttf69 KBTamilSangamMNbold.eot70 KBTamilSangamMNbold.woff80 KBGesamt: 682 KBCSS einrichten

Am Anfang war ich ein bisschen verwundert, dass die tatsächliche Reihenfolge in der Schriftenliste von Bedeutung war. Dann entdeckte ich, dass einige das erste Format verwenden, das es für kompatibel hält, anstatt sich an das optimale Format zu halten - und es ist zum Kotzen. Nach einigen Überlegungen stellte ich fest, dass dies der optimale Weg ist, um Ihre CSS zu formatieren (beachten Sie die Reihenfolge der Dateitypen)wichtig!).

@font-face {
    font-family: 'TamilSangam';
    src: url('.eot');
    src: url('.svg') format('svg'),          
         url('.eot?#iefix') format('embedded-opentype'),
         url('.woff') format('woff'),
         url('.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Meine TestergebnisseNormale Schriftarten

Ich habe die beste Version mit einem * markiert

Firefox MAC (15.0.1)

FontSquirrel Optimal: Verleiht etwas FettFontSquirrel Basic: Macht ein bisschen fettFontXChange 4.0: Rendert etwas zu fett, aber der Kerning ist besser als die FontSquirrel-Version *

Firefox Windows (15.0.1)

FontSquirrel Optimal: Rendert sehr schönFontSquirrel Basic: Die Schriftart wird gezackt / abgehacktFontXChange 4.0: Rendert sehr schön

Safari Mac (6.0)

FontSquirrel Optimal: Perfektes RendernFontSquirrel Basic: Perfektes RendernFontXChange 4.0: Perfektes Rendern *

Chrome Mac (21.0)

FontSquirrel Optimal: Etwas fettFontSquirrel Basic: Ein bisschen fettFontXChange 4.0: Perfektes Rendern *

Chrome Windows (21.0)

FontSquirrel Optimal: Perfektes RendernFontSquirrel Basic: Perfektes RendernFontXChange 4.0: Perfektes Rendern *

Internet Explorer (9.0)

FontSquirrel Optimal: Perfektes Rendern *FontSquirrel Basic: Perfektes RendernFontXChange 4.0: Die Schriftart wird gezackt / abgehacktFettgedruckte Schriftarten

Firefox MAC (15.0.1)

FontSquirrel Optimal: Macht sehr fettFontSquirrel Basic: Macht sehr fettFontXChange 4.0: Macht sehr fett, aber besseres 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: Rendert in Ordnung, nicht sehr voreingenommenFontSquirrel Basic: Die Schriftart wird gezackt / abgehacktFontXChange 4.0: Font wird etwas verzerrt / gezackt

Safari Mac (6.0)

FontSquirrel Optimal: Perfektes Rendern *FontSquirrel Basic: Perfektes RendernFontXChange 4.0: Macht fett

Chrome Mac (21.0)

FontSquirrel Optimal: Perfektes Rendern *FontSquirrel Basic: Guter Render, ein paar Prozent zu fettFontXChange 4.0: Macht fett

Chrome Windows (21.0)

FontSquirrel Optimal: Perfektes Rendern *FontSquirrel Basic: Perfektes RendernFontXChange 4.0: Macht sehr fett

Internet Explorer (9.0)

FontSquirrel Optimal: Perfektes Rendern *FontSquirrel Basic: Perfektes RendernFontXChange 4.0: Die Schriftart wird gezackt / abgehacktDie endgültige Umsetzung

Ich organisiere meine Webfonts normalerweise nach folgendem Muster: <Webfonts> / <Konvertierungsquelle> / <Konvertierungsmethode> / <Schriftarten>

/* Regular */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot');
    src: url('webfonts/fontxchange/TamilSangamMN.svg#TamilSangamMN') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontxchange/TamilSangamMN.woff') format('woff'),
         url('webfonts/fontxchange/TamilSangamMN.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot');
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.svg#tamil_sangam_mnbold') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.woff') format('woff'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

Grafische Übersicht des Ergebnisses (Vollbild beihttp://i.stack.imgur.com/atb98.png)

Schlussfolgerungen und Quests

Es gibt kein einziges Tool, das Schriften liefert, die auf dem Mac und unter Windows in allen Browsern gut dargestellt werden. Sie müssen mit jeder Schriftart experimentieren und testen. Die oben aufgeführte Methode ist nur eine einfache Möglichkeit und ein Vorschlag, wie Sie mit @ font-face's testen und experimentieren können.

Gibt es irgendetwas, von dem Sie glauben, dass ich es an meinen Methoden oder meiner Implementierung ändern könnte, gibt es eine Anwendung oder einen Dienst, den ich vermisst habe?

Alles Gute / T