woff2 feature test

️ تم أرشفة هذا المشروع ولم يعد يتم الحفاظ على المستودع.

اختبار Woff2-Feature-Test

اختبار ميزة بسيط لتنسيق خط Woff2.

• متوفر على NPM كاختبار woff2-feature-test

استخدام الحالة

بالنظر إلى أننا نستخدم loadCSS لتحميل ورقة أنماط غير متزامنة تحتوي على جميع محارفنا مثل URIs للبيانات ، نحتاج إلى طريقة لتحديد ما إذا كان تنسيق WOFF2 مدعومًا في المتصفح.

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

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

loadCSS( fontFile );

متطلبات

1. يجب عدم تقديم طلب HTTP إلى خادم بعيد ، أي شيء يستخدم ملف اختبار عن بُعد.
2. تفضل اتباع نهج متزامن مع نهج غير متزامن ، نريد تنفيذه والنتيجة متاحة على الفور.
3. أكثر من مجرد استنتاج. اقترح أن نتمكن من الاستنتاج بناءً على وجود واجهة برمجة تطبيقات Loading Font نظرًا لأنه يطابق حاليًا دعم Woff2. ولكن ماذا يحدث إذا قام المتصفح بتنفيذ واجهة برمجة تطبيقات تحميل الخط ولكن لا ينفذ Woff2؟ بدا هذا السيناريو ممكنًا تمامًا ولا نريد أي إيجابيات كاذبة.

يقترب

نستخدم واجهة برمجة تطبيقات تحميل الخط لتحميل بيانات Woff2 فارغة ومعرفة ما إذا كانت حالة مجموعة الخطوط يتم تحميلها أم لا. إذا حاول التحميل ، يتم دعم التنسيق. إذا لم يحدث ذلك ، فإن التنسيق غير معترف به (انظر الاختبار الفاشل عن عمد بتنسيق وهمي).

العرض التوضيحي

إذا قام المتصفح بتنظيم تنسيق Woff2 في النهاية ولكنه لا ينفذ واجهة برمجة تطبيقات تحميل الخط ، فسيقوم هذا البرنامج النصي بالإبلاغ عن سلبي خاطئ (وهو أفضل من السيناريوهات الإيجابية الخاطئة الموضحة أعلاه).

القيود

لاحظ أنه إذا كنت تستخدم رأس سياسة أمان المحتوى المقيد على font-src ، فقد يتسبب ذلك في حدوث مشكلات في اختبار الميزات هذا.

ستحتاج أيضًا إلى التأكد من أن سياسة أمان المحتوى الخاصة بك تسمح للبيانات URIs.

على سبيل المثال ، يستخدم github.com (وليس github.io) Content-Security-Policy:default-src *; font-src assets-cdn.github.com; الذي ينكر بياناتنا @font-face data uri.

إضافة

يمكن العثور على بعض المراجعات السابقة لهذا البرنامج النصي على جوهر.