Warum sollten wir ttf, eot, woff, svg, ... in eine Schriftart einschließen?

Question

In CSS3 font-face sind mehrere Schriftarten enthalten wie ttf , eot , woff , svg y cff .

Warum sollten wir alle diese Typen verwenden?

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

Answer 1

Antwort im Jahr 2019:

Verwenden Sie nur WOFF2, oder, wenn Sie die alte Version benötigen, WOFF. Verwenden Sie kein anderes Format

( svg y eot sind tote Formate, ttf y otf sind vollständige Systemschriften und sollten nicht für Webzwecke verwendet werden)

Originalantwort von 2012:

Kurz gesagt, font-face ist sehr alt, wird aber erst seit kurzem von mehr als dem 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.

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

• Die Zeit vergeht, SVG 1.1 fügt ein Kapitel "Schriftarten" hinzu, das erklärt, wie man eine Schriftart nur mit SVG-Markup modelliert, und die Leute beginnen, es zu benutzen. Mehr Zeit vergeht und es stellt sich heraus, dass sie absolut schrecklich im Vergleich zu einem normalen Schriftformat, und SVG 2 entfernt klugerweise das gesamte Kapitel wieder.

• Dann, woff wird von Leuten mit viel Fachwissen erfunden, die es ermöglichen, Schriften so zu hosten, dass Bits wegfallen, die für die Systeminstallation von entscheidender Bedeutung sind, aber für das Web irrelevant sind (was die Leute, die sich um Piraterie Sorgen machen, glücklich macht) und eine interne Komprimierung ermöglichen, die den Bedürfnissen des Webs besser entspricht (was Benutzer und Hoster glücklich macht). Dies wird das bevorzugte Format.

• 2019 bearbeiten Ein paar Jahre später, woff2 wird entworfen und akzeptiert, was die Komprimierung verbessert, was zu noch kleineren Dateien führt, zusammen mit der Möglichkeit, eine einzelne Schriftart "in Teilen" zu laden, so dass eine Schriftart, die 20 Skripte unterstützt, stattdessen als "Chunks" auf der Festplatte gespeichert werden kann, wobei die Browser automatisch in der Lage sind, die Schriftart je nach Bedarf "in Teilen" zu laden, anstatt die gesamte Schriftart im Voraus übertragen zu müssen, was den Schriftsatz weiter verbessert.

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

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

Unterstützung für woff kann überprüft werden unter http://caniuse.com/woff
Unterstützung für woff2 kann überprüft werden unter http://caniuse.com/woff2

Answer 2

Woff ist eine komprimierte (gezippte) Form der TrueType-OpenType-Schriftart. Sie ist klein und kann wie eine Grafikdatei über das Netz übertragen werden. Am wichtigsten ist, dass auf diese Weise die Schriftart vollständig erhalten bleibt, einschließlich der Rendering-Regel-Tabellen, um die sich nur sehr wenige Menschen kümmern, weil sie nur lateinische Schrift verwenden.

Werfen Sie einen Blick auf [tote URL entfernt]. Die Schriftart, die Sie sehen, ist eine experimentelle, für das Web bereitgestellte Smartfont (woff), die aus Tausenden von kombinierten Zeichen besteht, die komplexe Formen bilden. Der zugrundeliegende Text ist ein einfacher lateinischer Code aus dem romanisierten Singhalesischen. (Kopieren und in Notepad einfügen und sehen).

Nur woff kann das, denn niemand hat diese Schriftart und doch wird sie überall gesehen (Mac, Win, Linux und sogar auf Smartphones von allen Browsern außer dem IE. IE hat nicht die volle Unterstützung für Open Types).

Answer 3

WOFF 2.0, das auf dem Brotli-Komprimierungsalgorithmus und anderen Verbesserungen gegenüber WOFF 1.0 basiert und eine Reduzierung der Dateigröße um mehr als 30 % ermöglicht, wird von 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/ finden Sie ein Beispiel für die Verwendung dieser Funktion.

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