woff2 feature test

️ Este projeto está arquivado e o repositório não é mais mantido.

Testes Woff2-Feature

Um teste de recurso simples para o formato da fonte WOFF2.

• Disponível no NPM como woff2-feature-test

Caso de uso

Dado que usamos loadCSS para carregar de forma assíncrona uma folha de estilo contendo todos os nossos tipos de letra como URIs de dados, precisamos de uma maneira de determinar programaticamente se o formato WOFF2 é suportado no navegador.

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

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

loadCSS( fontFile );

Requisitos

1. Não deve fazer uma solicitação HTTP para um servidor remoto, qualquer coisa usando um arquivo de teste remoto foi lançado.
2. Prefira uma abordagem síncrona a uma assíncrona, queremos que ele seja executado e o resultado esteja disponível imediatamente.
3. Mais do que apenas uma inferência. Foi sugerido que poderíamos inferir com base na existência da API de carregamento de fontes, uma vez que atualmente corresponde ao suporte ao Woff2. Mas o que acontece se um navegador implementar a API de carregamento de fontes, mas não implementar o Woff2? Esse cenário parecia totalmente possível e não queríamos falsos positivos.

Abordagem

Utilizamos a API de carregamento de fontes para carregar um URI de dados vazios do WOFF2 e ver se o status do conjunto de fontes está carregando ou não. Se tentar carregar, o formato será suportado. Caso contrário, o formato não é reconhecido (consulte o teste de falha intencionalmente com um formato imaginário).

Demonstração

Se um navegador acabar implementando o formato WOFF2, mas não implementar a API de carregamento de fontes, esse script relatará um falso negativo (o que é preferível aos cenários falsos positivos descritos acima).

Limitações

Observe que, se você usar um cabeçalho restritivo de política de segurança de conteúdo no font-src , isso pode causar problemas com este teste de recurso.

Você também precisará garantir que sua política de segurança de conteúdo permita os URIs de dados.

Por exemplo, o github.com (não github.io) usa Content-Security-Policy:default-src *; font-src assets-cdn.github.com; que nega nosso URI de dados @font-face .

Adenda

Algumas revisões anteriores deste script podem ser encontradas em uma essência.