Warum sollten wir ttf, eot, woff, svg, ... in eine Schriftart aufnehmen?

In CSS3 font-face gibt es mehrere Schriftarten enthalten wie ttf, eot, woff, svgund cff.

Warum sollten wir all diese Typen verwenden?

Wenn sie für verschiedene Browser speziell sind, warum ist ihre Anzahl größer als die Anzahl der wichtigsten Webbrowser?

Antwort im Jahr 2019:

Verwenden Sie nur WOFF2 oder WOFF, wenn Sie Legacy-Unterstützung benötigen. Verwenden Sie kein anderes Format

( svgund eotsind tote Formate ttfund otfvollständige Systemschriftarten und sollten nicht für Webzwecke verwendet werden)

Ursprüngliche Antwort von 2012:

Kurz gesagt, Font-Face ist sehr alt, wurde aber erst kürzlich von mehr als IE unterstützt.

• eot wird für Internet Explorer benötigt, die älter als IE9 sind - sie haben die Spezifikation erfunden, aber eot war eine proprietäre Lösung.

• ttfund otfsind normale alte Schriftarten, so dass einige Leute sich darüber ärgerten, dass dies bedeutete, dass jeder teure, lizenzpflichtige Schriftarten kostenlos herunterladen konnte.

• Mit der Zeit fügt SVG 1.1 ein Kapitel "Schriftarten" hinzu, in dem erklärt wird, wie eine Schriftart ausschließlich mit SVG-Markup modelliert wird, und die Benutzer beginnen, sie zu verwenden. Es vergeht mehr Zeit und es stellt sich heraus, dass sie im Vergleich zu einem normalen Schriftformat absolut schrecklich sind , und SVG 2 entfernt das gesamte Kapitel mit Bedacht wieder.

• Wird woffdann von Leuten mit ziemlich viel Domänenwissen erfunden, was es ermöglicht, Schriftarten auf eine Weise zu hosten, die Bits wegwirft, die für die Systeminstallation von entscheidender Bedeutung sind, aber für das Web irrelevant sind (was die Leute über Piraterie glücklich macht) und ermöglicht eine interne Komprimierung, um den Anforderungen des Webs besser gerecht zu werden (was Benutzer und Hosts glücklich macht). Dies wird zum bevorzugten Format.

• 2019 bearbeiten Einige Jahre später woff2wird er entworfen und akzeptiert, was die Komprimierung verbessert und zu noch kleineren Dateien führt. Außerdem kann eine einzelne Schriftart "in Teilen" geladen werden, sodass eine Schriftart, die 20 Skripte unterstützt, als "Chunks" gespeichert werden kann "Stattdessen auf der Festplatte, wobei Browser die Schrift automatisch nach Bedarf" in Teilen "laden können, anstatt die gesamte Schrift im Voraus übertragen zu müssen, was das Satzerlebnis weiter verbessert.

Wenn Sie IE 8 und niedriger sowie iOS 4 und niedriger und Android 4.3 oder früher nicht unterstützen möchten, können Sie einfach WOFF (und WOFF2, ein stärker komprimiertes WOFF, für die neuesten Browser verwenden, die dies unterstützen).

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

Der Support für woffkann unter http://caniuse.com/woff überprüft werden. Der
Support für woff2kann unter http://caniuse.com/woff2 überprüft werden

Woff ist eine komprimierte (komprimierte) Form der TrueType - OpenType - Schriftart. Es ist klein und kann wie eine Grafikdatei über das Netzwerk geliefert werden. Am wichtigsten ist, dass auf diese Weise die Schriftart vollständig erhalten bleibt, einschließlich des Renderns von Regeltabellen, die nur sehr wenigen Menschen wichtig sind, da sie nur lateinische Schrift verwenden.

Schauen Sie sich [tote URL entfernt] an. Die Schriftart, die Sie sehen, ist eine experimentelle Web-Smartfont (woff), die Tausende von kombinierten Zeichen enthält, die komplexe Formen bilden. Der zugrunde liegende Text ist ein einfacher lateinischer Code des romanisierten Singhala. (Kopieren und in den Editor einfügen und sehen).

Nur woff kann dies tun, da niemand diese Schriftart hat und sie dennoch überall zu sehen ist (Mac, Win, Linux und sogar auf Smartphones von allen Browsern außer vom IE. Der IE unterstützt Open Types nicht vollständig).

WOFF 2.0, das auf dem Brotli-Komprimierungsalgorithmus und anderen Verbesserungen gegenüber WOFF 1.0 basiert und die Dateigröße um mehr als 30% reduziert, wird in Chrome, Opera und Firefox unterstützt.

http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli

http://sth.name/2014/09/03/Speed-up-webfonts/ enthält ein Beispiel für die Verwendung.

Grundsätzlich fügen Sie der woff2-Datei eine src-URL hinzu und geben das woff2-Format an. Es ist wichtig, dies vor dem woff-Format zu haben: Der Browser verwendet das erste Format, das er unterstützt.