woff2 feature test

️ Este proyecto está archivado y el repositorio ya no se mantiene.

prueba Woff2-Feature

Una prueba de característica simple para el formato de fuente Woff2.

• Disponible en NPM como woff2-feature-test

Caso de uso

Dado que usamos loadCSS para cargar asincrónicamente una hoja de estilo que contiene todos nuestros tipos de letra como URI de datos, necesitamos una forma de determinar programáticamente si el formato WOFF2 es compatible con el navegador.

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

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

loadCSS( fontFile );

Requisitos

1. No debe hacer una solicitud HTTP a un servidor remoto, cualquier cosa que use un archivo de prueba remoto estaba fuera.
2. Prefiera un enfoque sincrónico para uno asíncrono, queremos que se ejecute y que el resultado esté disponible de inmediato.
3. Más que una simple inferencia. Se sugirió que podríamos inferir en función de la existencia de la API de carga de fuente dado que actualmente coincide con el soporte para Woff2. Pero, ¿qué sucede si un navegador implementa la API de carga de fuentes pero no implementa Woff2? Este escenario parecía completamente posible y no queríamos falsos positivos.

Acercarse

Usamos la API de carga de fuente para cargar un URI de datos Woff2 vacío y ver si el estado del conjunto de fuentes se está cargando o no. Si intenta cargar, el formato es compatible. Si no es así, el formato no se reconoce (consulte la prueba de falla intencional con un formato imaginario).

Manifestación

Si un navegador eventualmente implementa el formato WOFF2 pero no implementa la API de carga de fuentes, este script informará un falso negativo (que es preferible a los escenarios falsos positivos descritos anteriormente).

Limitaciones

Tenga en cuenta que si utiliza un encabezado de política de seguridad de contenido restrictivo en font-src , eso puede causar problemas con esta prueba de características.

También deberá asegurarse de que su política de seguridad de contenido permita los URI de datos.

Por ejemplo, Github.com (no Github.io) usa Content-Security-Policy:default-src *; font-src assets-cdn.github.com; que niega nuestro URI de datos @font-face .

Apéndice

Algunas revisiones anteriores de este script se pueden encontrar en una esencia.