woff2 feature test

️ Ce projet est archivé et le référentiel n'est plus maintenu.

test de fonction WOFF2

Un test de fonction simple pour le format de police WOFF2.

• Disponible sur NPM en tant que woff2-feature-test

Cas d'utilisation

Étant donné que nous utilisons loadCSS pour charger de manière asynchrone une feuille de style contenant toutes nos polices en tant que URI de données, nous avons besoin d'un moyen de déterminer par programme si le format WOFF2 est pris en charge dans le navigateur.

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

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

loadCSS( fontFile );

Exigences

1. Ne doit pas faire de demande HTTP à un serveur distant, tout ce qui utilise un fichier de test distant était sorti.
2. Préférez une approche synchrone à une approche asynchrone, nous voulons qu'elle s'exécute et le résultat soit disponible immédiatement.
3. Plus qu'une simple inférence. Il a été suggéré que nous pouvions déduire en fonction de l'existence de l'API de chargement de police étant donné qu'il correspond actuellement à la prise en charge de WOFF2. Mais que se passe-t-il si un navigateur implémente l'API de chargement de police mais n'implémente pas WOFF2? Ce scénario semblait tout à fait possible et nous ne voulions pas de faux positifs.

Approche

Nous utilisons l'API de chargement de police pour charger un URI de données WOFF2 vide et voyons si l'état du réglage des polices se charge ou non. S'il tente de charger, le format est pris en charge. Si ce n'est pas le cas, le format n'est pas reconnu (voir le test intentionnellement défaillant avec un format imaginaire).

Démo

Si un navigateur met finalement implémente le format WOFF2 mais n'implémente pas l'API de chargement de police, ce script rapportera un faux négatif (ce qui est préférable aux scénarios faux positifs décrits ci-dessus).

Limites

Notez que si vous utilisez un en-tête de politique de sécurité de contenu restrictif sur font-src , cela peut entraîner des problèmes avec ce test de fonctionnalité.

Vous devrez également vous assurer que votre politique de sécurité de contenu autorise les URI de données.

Par exemple, github.com (pas github.io) utilise Content-Security-Policy:default-src *; font-src assets-cdn.github.com; qui nie notre @font-face DATA URI.

Addenda

Quelques révisions précédentes de ce script se trouvent sur un Gist.