woff2 feature test

️ Этот проект архивируется, а репозиторий больше не поддерживается.

WOFF2-Feature-Test

Простой тест функции для формата шрифта Woff2.

• Доступно на NPM в качестве woff2-feature-test

Вариант использования

Учитывая, что мы используем loadCSS для асинхронной загрузки таблицы стилей, содержащей все наши шрифты в качестве DATA URI, нам нужен способ программного определения, поддерживается ли формат WOFF2 в браузере.

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

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

loadCSS( fontFile );

Требования

1. Не должен делать HTTP -запрос на удаленный сервер, все, используя удаленный тестовый файл.
2. Предпочитаем синхронный подход к асинхронному, мы хотим, чтобы он выполнил, и результат был доступен немедленно.
3. Больше, чем просто вывод. Было высказано предположение, что мы могли сделать вывод на основе существования API загрузки шрифтов, учитывая, что в настоящее время он соответствует поддержке WOFF2. Но что произойдет, если браузер реализует API загрузки шрифта, но не реализует WOFF2? Этот сценарий казался совершенно возможным, и мы не хотели никаких ложных срабатываний.

Подход

Мы используем API загрузки шрифта для загрузки пустого URI данных WOFF2 и видим, загружается ли состояние набора шрифтов или нет. Если он пытается загрузить, формат поддерживается. Если это не так, формат не признается (см. Намеренно провал тест с воображаемым форматом).

Демо

Если браузер в конечном итоге реализует формат WOFF2, но не реализует API загрузки шрифта, этот сценарий сообщит о ложном отрицательном (который предпочтительнее ложноположительных сценариев, описанных выше).

Ограничения

Обратите внимание, что если вы используете заголовок политики безопасности ограничительного контента на font-src , это может вызвать проблемы с этим тестом функции.

Вам также необходимо убедиться, что ваша политика безопасности контента разрешает Data URI.

Например, github.com (не github.io) использует Content-Security-Policy:default-src *; font-src assets-cdn.github.com; который отрицает наши данные о данных @font-face .

Приложение

Несколько предыдущих изменений этого сценария можно найти на сути.