WOFF-Schriftarten-Wissensdatenbank | Aspose.Font

Einführung in die WOFF-Schriftart

Das Web Open Font Format (WOFF) ist ein Schriftartdateiformat, das speziell für die Verwendung im Web entwickelt wurde. Es wurde entwickelt, um einige der Einschränkungen und Herausforderungen traditioneller Schriftformate wie TrueType und OpenType in der Webentwicklung zu überwinden.

Das WOFF-Format bietet Ihnen:

Weboptimierung.
Cross-Browser-Kompatibilität.
Lizenz- und Urheberrechtsinformationen direkt in der Schriftartdatei enthalten.
Verbesserte Typografie mit Funktionen wie Ligaturen, Kerning und Stilalternativen.
Web-Zugänglichkeit.

Um WOFF-Schriftarten in der Webentwicklung zu verwenden, fügen Sie sie normalerweise mithilfe der „@font-face“-Regel in die HTML- und CSS-Dateien Ihres Projekts ein.

Vor- und Nachteile der WOFF-Schriftart

Die folgende Tabelle zeigt die Vor- und Nachteile von WOFF-Schriftarten, sodass Sie entscheiden können, ob Sie sie in Ihrem Projekt verwenden möchten oder nicht.

Vorteile	Nachteile
WOFF-Schriftarten sind komprimiert, sodass ihre Dateigröße im Vergleich zu anderen Schriftformaten kleiner ist. Dadurch werden Webseiten schneller geladen.	Ältere Browser unterstützen dieses Format möglicherweise nicht vollständig. Dies kann ein Problem darstellen, wenn Sie ältere Systeme unterstützen müssen.
Wird von den wichtigsten Webbrowsern weitgehend unterstützt, sodass die Schriftarten auf verschiedenen Plattformen und Browsern konsistent dargestellt werden.	Für einige hochwertige kommerzielle Schriftarten ist möglicherweise der Erwerb von Lizenzen erforderlich, um sie im WOFF-Format im Internet verwenden zu können.
WOFF-Schriftarten ermöglichen es den Erstellern von Schriftarten, Lizenz- und Copyright-Informationen in die Schriftartdatei selbst einzubetten.	WOFF-Schriftarten können auf verschiedenen Geräten oder Browsern aufgrund unterschiedlicher Schriftart-Rendering-Engines unterschiedlich gerendert werden.
Unterstützt erweiterte typografische Funktionen wie Ligaturen, Kerning und stilistische Alternativen.	Richtige Schriftartoptimierungstechniken sind unerlässlich, um die Dateigröße unter Kontrolle zu halten.
Kann die Barrierefreiheit im Internet verbessern, indem es eine bessere Kontrolle über Schriftart-Rendering, Abstände und Zeilenhöhen bietet.
WOFF-Schriftarten können in derselben Domäne wie die Webseite gehostet werden, wodurch das Risiko von Sicherheitslücken im Zusammenhang mit Cross-Origin-Anfragen für Schriftarten verringert wird.

Technische Details zu WOFF-Schriftarten

Das Web Open Font Format wurde speziell für die Nutzung im Internet entwickelt. Hier sind einige wichtige technische Details dazu:

WOFF-Schriftarten verwenden Komprimierungstechniken, um die Dateigröße im Vergleich zu den rohen TrueType- oder OpenType-Schriftartendateien zu reduzieren.
Sie umfassen Metadaten, die Informationen über die Schriftart enthalten, einschließlich Name, Urheberrecht und Lizenzdetails. Der Zugriff darauf kann programmgesteuert erfolgen, wodurch die Einhaltung der Schriftartenlizenzen einfacher wird.
WOFF-Schriftarten enthalten die Schriftdaten, die zum Rendern von Text erforderlich sind, einschließlich Glyphenformen, Metriken und anderen schriftartbezogenen Informationen. Diese Daten werden in einem Format kodiert, das Webbrowser interpretieren können.
Kann Hinweisinformationen enthalten, die verwendet werden, um die Lesbarkeit von Schriftarten bei kleinen Größen zu verbessern, indem die Position einzelner Glyphen angepasst und Anti-Aliasing gesteuert wird.
Sie können untergeordnet sein, was bedeutet, dass nur ein Teil der Glyphen der Schriftart in der Datei enthalten ist.
WOFF-Schriftarten werden normalerweise mit dem MIME-Typ „font/woff“ oder „font/woff2“ bereitgestellt, wenn sie von einem Webserver angefordert werden. Der MIME-Typ hilft Browsern zu verstehen, wie mit der Schriftartdatei umgegangen wird.
Bei der Verwendung von WOFF-Schriftarten auf einer Webseite definieren Webentwickler häufig einen Fallback-Schriftartenstapel in CSS, um sicherzustellen, dass der Browser ein Standardsystem oder ein anderes angegebenes System verwendet, wenn die angegebene WOFF-Schriftart nicht verfügbar ist oder nicht geladen werden kann.
Wenn WOFF-Schriftarten auf einer anderen Domäne als der Webseite gehostet werden, müssen CORS-Header auf dem Schriftartenserver festgelegt werden, damit Webbrowser sicher auf die Schriftartdateien zugreifen können. Dies trägt dazu bei, Cross-Site-Request-Forgery-Angriffe (CSRF) zu verhindern.
Zusätzlich zum ursprünglichen WOFF-Format gibt es ein neueres Format namens WOFF2, das eine noch bessere Komprimierung und kleinere Dateigrößen als WOFF bietet, aber möglicherweise nicht von allen älteren Browsern unterstützt wird.
WOFF-Schriftarten können eine breite Palette von Unicode-Zeichen enthalten, sodass sie Text in mehreren Sprachen und Skripten anzeigen können.

Wie rendern WOFF-Schriftarten Glyphen?

Schriftarten im Web Open Font Format rendern Glyphen auf ähnliche Weise wie andere Schriftartformate. Wenn ein Webbrowser oder eine Rendering-Engine auf Textinhalten auf einer Webseite stößt, die eine bestimmte Schriftart erfordern, führt er die folgenden Schritte aus, um die Glyphen darzustellen:

Wenn eine Webseite geladen wird und über CSS die Verwendung einer bestimmten Schriftart angegeben wird (z. B. „font-family“), prüft der Browser, ob die erforderliche Schriftart in seinem Cache vorhanden ist. Ist dies nicht der Fall, wird eine Anfrage an den Webserver gestellt, auf dem sich die Schriftartendatei befindet.
Wenn die Schriftart nicht vorhanden ist, sendet der Browser eine Anfrage an den Server nach der WOFF-Schriftartdatei, die der angegebenen Schriftfamilie zugeordnet ist.
Nach dem Empfang der Schriftartdatei analysiert der Browser die WOFF-Schriftartdaten und extrahiert Informationen zu Glyphenformen, Metriken, Zeichenzuordnung (Unicode-Zuordnung) usw.
Wenn Text auf der Webseite gerendert wird, ordnet der Browser jedes Zeichen im Text dem entsprechenden Glyphen in der Schriftart zu, basierend auf Unicode oder Codierungsinformationen.
Der Browser verwendet die Glypheninformationen, um die einzelnen Zeichen auf der Webseite darzustellen. Dazu gehört die Bestimmung der Größe, Position und des Abstands jedes Glyphen im Verhältnis zu anderen Glyphen im Text.
Um die visuelle Qualität von Text zu verbessern und die Kanten von Zeichen zu glätten, wendet der Browser möglicherweise Anti-Aliasing-Techniken auf die Glyphenformen an.
Wenn Kerning- und Ligaturinformationen vorhanden sind, passt der Browser möglicherweise den Abstand zwischen den Zeichen an und ersetzt bestimmte Zeichenkombinationen durch Ligaturen.
Wenn die Schriftart nicht verfügbar ist oder nicht geladen werden kann, verwendet der Browser eine Standard-Systemschriftart oder eine andere, die im CSS-Schriftartenstapel angegeben ist.
Schließlich zeigt der Browser den gerenderten Text auf der Webseite an und verwendet dabei die aus der WOFF-Schriftart generierten Glyphen.

WOFF von WOFF2?

	WOFF	WOFF2
Komprimierung	Verwendet eine Komprimierungsmethode basierend auf Zlib-Komprimierung	Verwendet einen fortschrittlicheren und effizienteren Komprimierungsalgorithmus namens Brotli. Diese Komprimierung ist hocheffizient und führt häufig zu Schriftdateien, die etwa 30–50 % kleiner sind als ihre WOFF-Äquivalente.
Browserunterstützung	Wird in modernen Webbrowsern gut unterstützt. Ältere Browser unterstützen dieses Format möglicherweise nur eingeschränkt oder überhaupt nicht.	Wird von modernen Browsern breiter unterstützt.
Dateigröße	Sind komprimiert und kleiner als Rohschriftformate, ihre Dateigrößen können jedoch immer noch relativ groß sein.	Sie sind normalerweise viel kleiner als WOFF und die ursprünglichen Rohschriftformate.
Leistung	Bieten im Vergleich zu Rohschriftformaten aufgrund der geringeren Dateigröße und optimierten Bereitstellung eine bessere Leistung.	Sorgen Sie für eine überlegene Webleistung, indem Sie die zum Herunterladen von Schriftdateien benötigte Zeit erheblich reduzieren.

Wie erstelle ich eine WOFF-Schriftart?

Das Erstellen einer WOFF-Schriftart (Web Open Font Format) erfordert die Konvertierung anderer Schriftformate in das WOFF-Format. Hier sind die Schritte des Prozesses:

Besorgen Sie sich eine TTF- oder OTF-Schriftart. Sie können entweder Ihre eigene Schriftart erstellen, indem Sie eine Schriftarten-Design-Software verwenden oder eine vorhandene Schriftart verwenden, für die Sie die entsprechenden Lizenzrechte haben.
Stellen Sie sicher, dass Ihre Schriftartdatei gut gestaltet und fehlerfrei ist.
In WOFF konvertieren.
Bevor Sie die WOFF-Schriftart auf Ihrer Website verwenden, testen Sie die Schriftart und beheben Sie Probleme, falls Sie welche finden.
Hosten Sie die WOFF-Schriftartdatei auf Ihrem Webserver oder einem Content Delivery Network (CDN), damit Ihre Website darauf zugreifen kann. Stellen Sie sicher, dass Sie den entsprechenden MIME-Typ für WOFF-Dateien festlegen, normalerweise „font/woff“.
Verwenden Sie die WOFF-Schriftart in CSS mit der @font-face-Regel, die die WOFF-Schriftart definiert und ihre Quelle mithilfe der src-Eigenschaft angibt. Hier ist ein Beispiel:

1    @font-face { 
2        font-family: 'YourFontName'; 
3        src: url('path/to/your-font.woff') format('woff'); 
4    }

Wenden Sie die Schriftart mithilfe der Eigenschaft „font-family“ in Ihrem CSS auf bestimmte HTML-Elemente an.

1    body { 
2        font-family: 'YourFontName', sans-serif; 
3    }

Stellen Sie sicher, dass Sie über die entsprechenden Lizenzrechte für die Schriftart verfügen, die Sie auf Ihrer Website verwenden, insbesondere wenn es sich um eine kommerzielle Schriftart handelt.

Wie optimiert man WOFF-Dateien?

Die Optimierung von WOFF-Schriftarten (Web Open Font Format) ist für die Verbesserung der Webleistung unerlässlich, indem die Schriftdateigröße reduziert und gleichzeitig eine hochwertige Typografie beibehalten wird. Hier sind die Möglichkeiten, wie Sie es tun können:

Durch die Unterteilung der Schriftart (8) wird sichergestellt, dass Sie nur die Zeichen verwenden, die für Ihre Website erforderlich sind. Dies reduziert nicht nur die Dateigröße, sondern erleichtert Ihnen auch die Verwaltung.
Finden Sie heraus, ob Sie in Ihrer Schriftart wirklich Hinting- und Kerning-Informationen benötigen, da diese die Dateigröße erhöhen. Einige Schriftarten funktionieren möglicherweise gut ohne Hinting und Kerning, insbesondere bei größeren Größen.
Optimieren Sie Glyphen, indem Sie ihre Umrisse überprüfen und alle unnötigen Punkte oder Kurven entfernen und gleichzeitig die visuelle Qualität beibehalten. Bei dieser Optimierung kann eine Schriftbearbeitungssoftware helfen.
Komprimieren Sie Ihre WOFF-Schriftartendateien mit Tools wie gzip oder Brotli auf Ihrem Webserver, um die Dateigröße beim Bereitstellen von Schriftarten für den Browser zu reduzieren.
Implementieren Sie geeignete Caching-Header auf Ihrem Webserver, um sicherzustellen, dass Schriftarten vom Browser zwischengespeichert werden, und um ein unnötiges erneutes Herunterladen von Schriftarten bei späteren Besuchen Ihrer Website zu verhindern.
Verwenden Sie ein Content Delivery Network (CDN), das oft über optimierte Caching- und Bereitstellungsmechanismen verfügt, die die Ladezeiten von Schriftarten verkürzen können.
Versuchen Sie, das Preload-Attribut in Ihrem HTML-Code zu verwenden, um wichtige Schriftarten früh im Seitenladevorgang zu laden und so schriftbezogene Renderblockierungsverzögerungen zu reduzieren.
Verwenden Sie die CSS-Eigenschaft „font-display“, um zu steuern, wie Schriftarten beim Laden angezeigt werden.
Verwenden Sie reaktionsfähige Typografietechniken, um je nach Bildschirmgröße und Auflösung unterschiedliche Schriftartvarianten zu laden. Nutzen Sie Medienabfragen, um unterschiedliche Schriftartdateien für unterschiedliche Geräte und Bildschirmgrößen zu laden.
Begrenzen Sie die Anzahl der Schriftarten, die Sie auf Ihrer Website verwenden, da jede zusätzliche Schriftart die Gesamtdateigröße erhöht.
Vermeiden Sie übermäßige Schriftartanpassungen (z. B. mehrere Schriftstärken und -stile), wenn diese für Ihr Design nicht unbedingt erforderlich sind.
Testen Sie die Leistung Ihrer Website regelmäßig mit Tools wie Google PageSpeed Insights oder GTmetrix, um schriftartbezogene Leistungsprobleme zu identifizieren.

Standards und Spezifikationen des W3C (World Wide Web Consortium) in Bezug auf WOFF-Schriftarten.

Das W3C ist für die Entwicklung und Pflege verschiedener Standards und Spezifikationen im Zusammenhang mit Webtechnologien, einschließlich Schriftarten, verantwortlich. Ein wichtiger Standard für Schriftarten im Web ist das Web Open Font Format (WOFF). WOFF ist ein Schriftartenformat, das speziell für die Verwendung im Web entwickelt wurde und eine Möglichkeit bietet, Schriftarten für eine effiziente Bereitstellung und Verwendung auf Webseiten zu bündeln. Hier sind einige wichtige W3C-Punkte:

WOFF 1.0 (Web Open Font Format 1.0):

Das ursprüngliche WOFF-Format, das vom W3C eingeführt wurde.
Bietet eine Möglichkeit, Schriftartendaten für die Verwendung im Web zu bündeln und so Dateigröße und Ladezeiten zu optimieren.
Unterstützt TrueType- und OpenType-Schriftdaten.
Veröffentlicht als W3C-Empfehlung am 3. Dezember 2012.

WOFF 2.0 (Web Open Font Format 2.0):

Eine aktualisierte Version des WOFF-Formats mit verbesserter Komprimierung und anderen Verbesserungen.
Bietet bessere Komprimierungsraten als WOFF 1.0, was zu kleineren Dateigrößen führt.
Unterstützt auch TrueType- und OpenType-Schriftdaten.
Veröffentlicht als W3C-Empfehlung am 18. August 2016.

WOFF-Dateiformat (Arbeitsentwurf):

Die laufende Arbeit des W3C an der Spezifizierung der technischen Details des WOFF-Dateiformats.
Bietet Informationen zur Struktur von WOFF-Dateien, einschließlich Metadaten und Schriftartdaten.
Hilft Implementierern und Entwicklern zu verstehen, wie WOFF-Schriftarten effektiv erstellt und verwendet werden.

Webfonts-Arbeitsgruppe:

Die Web Fonts Working Group ist für die Entwicklung und Pflege von Standards im Zusammenhang mit Webfonts, einschließlich WOFF, verantwortlich.
Die Arbeit der Gruppe umfasst die Behebung von Problemen beim Laden und Rendern von Schriftarten, die Optimierung der Schriftartenbereitstellung und die Verbesserung der Schriftartensicherheit im Web.

CSS-Schriftartenmodul Level 3:

Diese CSS-Spezifikation definiert, wie Schriftarten in CSS-Stylesheets referenziert und verwendet werden.
Stellt die „@font-face“-Regel bereit, die es Webentwicklern ermöglicht, benutzerdefinierte Schriftarten für Webseitenelemente anzugeben, einschließlich der Verwendung von WOFF-Schriftarten

Abschluss

Die Entwicklung und Verwendung von WOFF-Schriftarten (Web Open Font Format) haben den Web-Typografieprozess erheblich verbessert. Dieses vielseitige Schriftformat hat es Webdesignern und Entwicklern ermöglicht, Benutzern im gesamten Internet kreativere und zugänglichere typografische Erlebnisse zu bieten.

WOFF bietet eine Reihe von Vorteilen, darunter eine effiziente Komprimierung für schnellere Seitenladezeiten, eine verbesserte browserübergreifende Kompatibilität und die Möglichkeit, benutzerdefinierte Schriftarten einzubinden, ohne die Leistung der Website zu beeinträchtigen. Sie sind zu einem festen Bestandteil des Webdesigns geworden und erfreuen sich noch immer großer Beliebtheit und Unterstützung.

SVG-Schriftarten CFF-Schriftarten