woff2 feature test

Euen Dieses Projekt ist archiviert und das Repository wird nicht mehr aufrechterhalten.

WOFF2-Featurestest

Ein einfacher Feature -Test für das WOFF2 -Schriftformat.

• Erhältlich auf NPM als woff2-feature-test

Anwendungsfall

Angesichts der Tatsache, dass wir loadCSS verwenden, um ein Stylesheet asynchron zu laden, das alle unsere Schriftarten als Data -URIs enthält, müssen wir programmgesteuert feststellen, ob das WOFF2 -Format im Browser unterstützt wird.

 var fontFile = "/url/to/woff.css";

// Use WOFF2 if supported
if( supportsWoff2 ) {
	fontFile = "/url/to/woff2.css";
}

loadCSS( fontFile );

Anforderungen

1. Ich darf keine HTTP -Anforderung an einen Remote -Server erstellen.
2. Bevorzugen Sie einen synchronen Ansatz für einen asynchronen Ansatz, wir möchten, dass er ausführt und das Ergebnis sofort verfügbar sein soll.
3. Mehr als nur eine Schlussfolgerung. Es wurde vermutet, dass wir auf der Grundlage der Existenz der Schriftladelading -API schließen können, da sie derzeit die Unterstützung für WOFF2 übereinstimmt. Aber was passiert, wenn ein Browser die Schriftlade -API der Schriftart implementiert, aber WOFF2 nicht implementiert? Dieses Szenario schien durchaus möglich zu sein und wir wollten keine falsch positiven Ergebnisse.

Ansatz

Wir verwenden die Schriftlade -API mit der Schriftlade -Lade -Lade ein leerer WOFF2 -Daten -URI und prüfen, ob der Status der Schriftart geladen wird oder nicht. Wenn es versucht zu laden, wird das Format unterstützt. Wenn dies nicht der Fall ist, ist das Format nicht anerkannt (siehe den absichtlich fehlenden Test mit einem imaginären Format).

Demo

Wenn ein Browser letztendlich das WOFF2 -Format implementiert, aber die Schriftlade -API nicht implementiert, meldet dieses Skript ein falsches Negativ (das den oben beschriebenen falsch positiven Szenarien vorzuziehen ist).

Einschränkungen

Beachten Sie, dass wenn Sie einen restriktiven Header für die Sicherheitsrichtlinie für die Inhaltssicherheit bei font-src verwenden, dies bei diesem Funktionstest zu Problemen führen kann.

Sie müssen auch sicherstellen, dass Ihre Inhaltssicherheitsrichtlinie Data URIs ermöglicht.

Beispielsweise verwendet Github.com (nicht github.io) Content-Security-Policy:default-src *; font-src assets-cdn.github.com; das leugnet unseren @font-face -Daten URI.

Nachtrag

Einige frühere Überarbeitungen dieses Skripts finden Sie auf einem Kern.