Was genau ist eine Web-Schriftart und was beinhaltet die Konvertierung in eine Web-Schriftart?

Ich habe ein paar Artikel dazu gelesen, aber die tatsächlichen technischen Unterschiede zwischen Web- und Desktop-Schriftarten sind mir immer noch nicht bewusst. Je mehr ich über das Thema lese, desto mehr habe ich das Gefühl, dass niemand eine klare technische Definition dessen hat, was genau ein Webfont ist.

Was genau tun diese Dienste, wenn ich eine "Desktop" -Schrift auf einen Webfont-generierenden Dienst wie FontSquirrel hochlade, um aus der Schriftdatei eine Webschrift zu machen? Wenn die hauptsächliche Verwendung dieser Dienste die Konvertierung in verschiedene Formate ist, welche Formate werden im modernen Web tatsächlich benötigt, um eine angemessene Anzahl von Browsern ab 2019 zu unterstützen?

Eine "Web-Schriftart" ist nur eine Schriftart, die im Web oder im Browser verwendet wird. Diese Generatoren für Webschriftarten vereinfachen lediglich Ihr Leben, indem sie Ihnen das erforderliche CSS für die Bereitstellung der Schrift für Ihre Besucher bereitstellen und Ihre Schrift in alle Dateiformate konvertieren, die Sie benötigen, um sicherzustellen, dass die Schrift browserübergreifend funktioniert.

Einige Schriften gelten als "web-sicher", da sie so verbreitet sind, dass sie auf jedem Computer installiert sind, wie beispielsweise "Arial". Sie müssen nichts weiter tun, als der Website mitzuteilen, dass sie diese Schriftart verwenden soll. Webschriften müssen vom Browser des Besuchers heruntergeladen werden, da eine Schrift, die sich nicht auf Ihrem Computer befindet, nicht angezeigt wird.

Speziell für das Web entwickelte Schriftformate wie Woff sind auf kleine Dateigrößen ausgelegt. Google-Schriftarten unterstützen Sie auch auf diese Weise in verschiedenen Formaten. Sie sind nur ein wenig versteckt.

Es ist ziemlich wichtig zu beachten, dass einige Schriftarten möglicherweise eine separate Web-Schriftarten-Lizenz haben, die Sie möglicherweise nicht haben, selbst wenn Sie Eigentümer der Schriftarten-Dateien sind. Genau wie bei Google Bilder ... Nur weil Sie das Bild herunterladen konnten, heißt das nicht, dass Sie es für den Aftershave Ihres Unternehmens verwenden können.

Developers.google.com hat einen guten Beitrag, der sich auf die Optimierung von Web-Schriften konzentriert, aber auch einige grundlegende Informationen enthält.

Es gibt einen ziemlich guten Auszug über die verschiedenen Formate in diesem Artikel:

Derzeit werden im Web vier Schriftcontainerformate verwendet: EOT, TTF, WOFF und WOFF2. Leider gibt es trotz der großen Auswahl kein einziges universelles Format, das für alle alten und neuen Browser geeignet ist: EOT ist nur IE, TTF bietet teilweise IE-Unterstützung, WOFF bietet die umfassendste Unterstützung, ist jedoch in einigen älteren Browsern nicht verfügbar Die Unterstützung von, und WOFF 2.0 ist für viele Browser in Arbeit.

Also, wo bleibt uns das? Es gibt kein einziges Format, das in allen Browsern funktioniert. Das heißt, wir müssen mehrere Formate bereitstellen, um eine einheitliche Darstellung zu gewährleisten

Transfonter hat auch eine ziemlich gute Tabelle zur Browserunterstützung:

Nachdem ich diese Frage gestellt hatte, habe ich einige genauere Nachforschungen angestellt. Deshalb füge ich diese Antwort als eine Art Nachtrag zu Joonas 'hinzu, was gut war, aber meine letzte Frage nicht detailliert genug für mich beantwortete:

Wenn die hauptsächliche Verwendung dieser Dienste die Konvertierung in verschiedene Formate ist, welche Formate werden im modernen Web tatsächlich benötigt, um eine angemessene Anzahl von Browsern ab 2019 zu unterstützen?

Viele Entwickler argumentieren, dass WOFF und WOFF2 die einzigen Schriftformate sind, die in der modernen Webentwicklung benötigt werden . Diese Antworten sind jedoch nicht gut fundiert, und ich denke auch, dass sie etwas übereifrig sind. Schauen wir uns zunächst die tatsächlichen Unterstützungszahlen für WOFF und WOFF2 an, die von CanIUse.com zur Verfügung gestellt werden, dem Industriestandard, um dies zu dokumentieren so etwas.

Unterstützung für WOFF2

WOFF2 verbessert WOFF in jeder Hinsicht, wird von den meisten Desktop-Browsern unterstützt, die nach 2014 veröffentlicht wurden, wird jedoch erst seit 2018 von den meisten mobilen Browsern unterstützt. Es wird von schätzungsweise 93% der Browser weltweit unterstützt.

Unterstützung für WOFF

WOFF wurde ab Internet Explorer in IE9 (veröffentlicht 2011) unterstützt, wodurch das EOT-Format für IE-Versionen, die seit 2011 veröffentlicht wurden, veraltet ist. Es wird von geschätzten 97% der Browser weltweit unterstützt.

Andere Desktop-Browser unterstützen WOFF ungefähr zur gleichen Zeit, einschließlich Firefox seit Firefox 3.6, Chrome seit Chrome 5 und Safari seit 5.1 (veröffentlicht in 2010, 2011 und 2011), wodurch die Formate TTF und OTF ¹ in früheren Versionen überholt sind . Die meisten mobilen Browser unterstützen WOFF seit 2013.

Vorbehalt und Schlussfolgerungen

Von diesem Standpunkt aus ist es einfach genug, alle anderen Formate als unnötig zu bezeichnen, aber offiziell nicht mehr unterstützte Software war nie ein guter Indikator dafür, dass sie nicht mehr verwendet wird. Anders ausgedrückt, es wird nicht garantiert, dass die Freigabe der globalen Browserversion für die demografischen Daten repräsentativ ist, von denen Ihre Website verwendet wird.

Die Versionsfreigabe von Browsern kann je nach Bevölkerungsgruppe erheblich variieren: Faktoren wie Land, soziale Schicht und Einkommen haben großen Einfluss darauf, welche Geräte (und daher Browserversionen) Ihre Benutzer verwenden. Überlegen Sie sich als Entwickler, ob die Website, die Sie erstellen, von demografischen Merkmalen verwendet wird, die mit größerer Wahrscheinlichkeit ältere Versionen verwenden.

Wenn Sie der Meinung sind, dass dies der Fall ist und Desktop-Browser älter als 2011 oder mobile Browser älter als 2013 unterstützen müssen, verwenden Sie den vollständigen Schriftstapel: WOFF2, WOFF, TTF (oder OTF) und EOT.

Wenn Sie diese alten Browser nicht unterstützen müssen und dies höchstwahrscheinlich immer noch nicht der Fall ist, verwenden Sie einfach WOFF2 und WOFF als Ihren Schriftstapel.

_{(1) TTF und OTF sind traditionelle Desktop-Schriftformate, und jeder Browser, der eines unterstützt, unterstützt das andere. Verwenden Sie daher niemals beide}

Nicht viel.

WOFF ist nichts anderes als ein komprimiertes Format für TTF, was zu einer kleineren Größe führt. Die Interna ändern sich nicht. WOFF2 geht noch ein Stückchen weiter und ändert die Schriftdarstellung geringfügig, um eine etwas stärkere Komprimierung zu erzielen. EOT, ein reines MS-Format, zählt überhaupt nicht. SVG besteht praktisch nur aus Konturen, kaum mehr. Daher zählt es nicht als echte Schriftart, sondern wird nur für Symbole verwendet, wenn überhaupt.

Verwenden Sie einfach WOFF und fertig. Wenn Sie das letzte Byte auspressen möchten, möchten Sie möglicherweise auch WOFF2 anbieten, aber der Unterschied ist vernachlässigbar.

Ich möchte jedoch etwas wirklich Grundlegendes betonen: Ein "Webfont", abgesehen von technischen Implementierungsdetails, ist eine Schriftart, die Sie lizenziert haben, von ihrem Urheber oder einem Rechteinhaber für die spezifische Aufgabe der Verwendung auf einer Website. Und diese werden in einem Webfont-Format geliefert. Wenn Sie vor einem Generator sitzen, um eine Schriftart in ein Webfont-Format umzuwandeln, und es nicht Open Source ist, oder eine, die Sie selbst gezeichnet haben, hören Sie gleich hier auf! Sie brechen mit ziemlicher Sicherheit die Lizenz und könnten verklagt werden. Und da es im Web ist, können die Leute leicht herausfinden, was Sie tun, und anhand ihrer Umsatzliste nachsehen.

Siehe z. B. diesen Doofus , der für Facebook und Google gearbeitet hat und der es nicht merkte, bis ihm jemand sagte, dass er technisch eine Raubkopie-Schriftart auf seiner Website verwendet. Er hatte eine Desktop-Abonnement-Lizenz, aber das ist keine Lizenz für die Internetnutzung.