woff2 feature test

️ Proyek ini diarsipkan dan repositori tidak lagi dipertahankan.

tes woff2-feature

Tes fitur sederhana untuk format font WOFF2.

• Tersedia di NPM sebagai woff2-feature-test

Gunakan kasing

Mengingat bahwa kami menggunakan loadCSS untuk secara asinkron memuat stylesheet yang berisi semua jenis huruf kami sebagai data URI, kami membutuhkan cara untuk secara terprogram menentukan apakah format WOFF2 didukung di browser.

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

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

loadCSS( fontFile );

Persyaratan

1. Tidak boleh membuat permintaan HTTP ke server jarak jauh, apa pun yang menggunakan file uji jarak jauh keluar.
2. Lebih suka pendekatan sinkron ke yang asinkron, kami ingin dieksekusi dan hasilnya akan segera tersedia.
3. Lebih dari sekedar kesimpulan. Disarankan agar kami dapat menyimpulkan berdasarkan keberadaan API pemuatan font mengingat bahwa saat ini cocok dengan dukungan untuk WOFF2. Tetapi apa yang terjadi jika browser mengimplementasikan API pemuatan font tetapi tidak mengimplementasikan WOFF2? Skenario ini sepertinya sangat mungkin dan kami tidak menginginkan positif palsu.

Mendekati

Kami menggunakan Font Memuat API untuk memuat data WOFF2 yang kosong dan melihat apakah status set font dimuat atau tidak. Jika mencoba memuat, format didukung. Jika tidak, formatnya tidak dikenali (lihat tes yang sengaja gagal dengan format imajiner).

Demo

Jika browser pada akhirnya mengimplementasikan format WOFF2 tetapi tidak mengimplementasikan Font Memuat API, skrip ini akan melaporkan negatif palsu (yang lebih disukai daripada skenario positif palsu yang dijelaskan di atas).

Batasan

Perhatikan bahwa jika Anda menggunakan header kebijakan keamanan konten yang terbatas pada font-src , itu dapat menyebabkan masalah dengan tes fitur ini.

Anda juga harus memastikan kebijakan keamanan konten Anda memungkinkan URI data.

Misalnya, github.com (bukan github.io) menggunakan Content-Security-Policy:default-src *; font-src assets-cdn.github.com; Yang menyangkal data @font-face kami URI.

Tambahan

Beberapa revisi sebelumnya dari skrip ini dapat ditemukan di intinya.