Seitdem die Probleme durch die Verwendung gebrachtCufon Ich habe es gewagt, keine externen Schriftartenressourcen zu verwenden, aber in letzter Zeit habe ich nach alternativen Methoden zum Laden von Schriftarten gesucht, um festzustellen, ob es einen besseren Weg gibt. Bessere Methoden tauchen nur aus heiterem Himmel auf.

Es gibt viele neue Methoden und Variationen für jede Methode. Sollte ich es benutzenSchreibzeug? oderGoogle Webfonts (mit js oder css)? Soll ich weiterhin lokal geladene Schriftarten verwenden (z. B. die von fontsquirrel.com generierte Methode)?

Ich werde im Folgenden die Methoden auflisten, die mit einigen Tests am besten ankommen, aber lohnt es sich wirklich, auf ein Webfont umzusteigen? Es scheint, als würde es eine höhere Ressourcenlast (http-Anforderungen) und weniger Dateiformattypen (weniger Kompatibilität) usw. aufweisen. Es sieht jedoch so aus, als würden Dateien in den meisten Fällen asynchron und effizient geladen.

Ist es nur eine Frage der Situation und der Notwendigkeit? Wenn ja, was sind sie?Gibt es drastische Unterschiede zwischen diesen Methoden?Gibt es eine bessere Methode, die ich nicht aufgelistet habe?Was sind die Vor- / Nachteile für die Leistung? Aussehen? Abhängigkeiten? Kompatibilitäten?

Ich bin wirklich auf der Suche nach Best Practices. Leistung ist eine große Sache, aber auch Skalierbarkeit und Benutzerfreundlichkeit. Ganz zu schweigen von Look and Feel.

Google CSSVerwendet nur externes StylesheetVerwendet nur den kleinsten kompatiblen DateitypKann benutzen@import oder<link> oder nimm den Inhalt des Styleshees (@font-face) und direkt in Ihr eigenes Stylesheet einfügen.

Testergebnisse

  78ms load of html
  36ms load of css

Google JS-MethodeVerwendetwebfont.js styleshet ladenVerwendet nur den kleinsten kompatiblen Dateityphängt an:root Element mit KlasseFügt dem Kopf ein Skript hinzu.

Testergebnisse

    171ms load of html
    176ms load of js
    32ms load of css

Typekit-Methodehängt an:root Element mit Klasse.Kann benutzen*.js Snippet oder extern geladene Datei*.js DateiVerwendetdata:font/opentype anstelle der Schriftartdatei.Fügt dem Kopf ein Skript hinzuFügt dem head eingebettetes CSS hinzu

Fügt dem Kopf ein externes Stylesheet hinzu

Über typekit.com können Sie ganz einfach Schriftarten und Zielwahltasten hinzufügen / entfernen / anpassen

Testergebnisse

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

… Und die Font-Eichhörnchen-Methode

@font-face{
    font-weight:400;
    font-style:normal;
    font-family:open_sanslight;
    src:url(../font/opensans-light-webfont.eot);
    src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
        url(../font/opensans-light-webfont.woff) format(woff),
        url(../font/opensans-light-webfont.ttf) format(truetype),
        url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}

… Oder mit Daten: Schriftartmethode…

@font-face {
    font-family: 'open_sanslight';
    src: url('opensans-light-webfont-f.eot');
}

@font-face {
    font-family: 'open_sanslight';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
         url('opensans-light-webfont-f.ttf') format('truetype'),
         url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}