woff2 feature test

ショ和このプロジェクトはアーカイブされており、リポジトリは維持されなくなりました。

Woff2-feature-test

Woff2フォント形式のシンプルな機能テスト。

• woff2-feature-testとしてnpmで利用可能

使用事例

loadCSSを使用して、すべての書体をデータURIとして含むStyleSheetを非同期的にロードすることを考えると、Woff2形式がブラウザでサポートされているかどうかをプログラム的に判断する方法が必要です。

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

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

loadCSS( fontFile );

要件

1. リモートサーバーにHTTPリクエストを作成しないでください。リモートテストファイルを使用しているものはすべて発売されました。
2. 非同期のアプローチよりも同期的なアプローチを好むように、それを実行し、結果をすぐに利用できるようにしたいと思います。
3. 単なる推論以上のもの。現在Woff2のサポートと一致しているため、フォントロードAPIの存在に基づいて推測できることが示唆されました。しかし、ブラウザがフォントロードAPIを実装しているが、WOFF2を実装しないとどうなりますか？このシナリオは完全に可能であると思われ、誤った肯定的なものを望んでいませんでした。

アプローチ

フォントロードAPIを使用して、空のWoff2データURIをロードし、フォントセットステータスがロードされているかどうかを確認します。ロードしようとすると、フォーマットがサポートされます。そうでない場合、形式は認識されていません（虚数形式で意図的に失敗したテストを参照）。

デモ

ブラウザが最終的にWOFF2形式を実装しているが、フォントロードAPIを実装しない場合、このスクリプトは偽ネガ（上記の誤検知シナリオよりも望ましい）を報告します。

制限

font-srcに制限コンテンツセキュリティポリシーヘッダーを使用する場合、この機能テストで問題を引き起こす可能性があることに注意してください。

また、コンテンツセキュリティポリシーがデータURIを許可することを確認する必要があります。

たとえば、github.com（github.ioではありません） Content-Security-Policy:default-src *; font-src assets-cdn.github.com;これは@font-faceデータuriを拒否します。

補遺

このスクリプトのいくつかの以前の改訂は、要点に記載されています。