WOFF2

طوّرت Google نظام WOFF2 وأصبح توصية W3C في مارس 2018. يبني على مفهوم WOFF الأصلي لكنه يستبدل ضغط zlib بـBrotli — خوارزمية ضغط طوّرتها Google أيضاً — وهي تُحقق نسب ضغط أفضل بشكل ملحوظ.

لكن WOFF2 ليس مجرد "WOFF بضغط أفضل". إنه يُقدّم تحويل معالجة مسبقة يُعيد هيكلة بيانات الخط قبل الضغط، مما يجعلها قابلة للضغط بدرجة أكبر بكثير. بالنسبة لحواف TrueType، يعني ذلك تطبيق الترميز التنبؤي على إحداثيات الحروف الرسومية — يُرمَّز كل نقطة كفرق من قيمة متنبَّأ بها بدلاً من إحداثيات مطلقة. النتيجة تدفق بايتات أكثر تكراراً يستطيع Brotli ضغطه بقوة.

هذا الأسلوب ذو الخطوتين — المعالجة المسبقة الخاصة بالمجال متبوعةً بضغط متعدد الأغراض — هو السبب في أن WOFF2 يُنتج باستمرار أصغر ملفات الخطوط بين جميع التنسيقات.

يُطبّق WOFF2 خط أنابيب ضغط ثنائي المرحلة على بيانات الخط المصدر:

• المرحلة 1: تحويل المعالجة المسبقة — تُعيد تحويلات خاصة بالخط هيكلة البيانات لتعظيم قابلية الضغط. بالنسبة لحواف حروف TrueType الرسومية، يُستخدم الترميز التنبؤي للإحداثيات — تُرمَّز كل نقطة كفرق من الموضع المتنبَّأ به، مما يُنتج أعداداً أصغر بكثير. تُطبَّق تحويلات مماثلة على جداول الخطوط الأخرى.
• المرحلة 2: ضغط Brotli — تُضغَط البيانات المُعالَجة مسبقاً بـ Brotli، الذي يجمع بين ضغط النافذة المنزلقة LZ77 وترميز Huffman وقاموس ثابت مدمج. يُحقق Brotli ضغطاً أفضل بنسبة 20-30% من zlib على بيانات الخطوط النموذجية.

على جانب المتصفح، تنعكس العملية: فك ضغط Brotli متبوعاً بتحويلات عكسية لإعادة بناء جداول الخط الأصلية. على الرغم من الخطوة الإضافية، فك ضغط WOFF2 في الواقع أسرع من WOFF1 — صُمِّم Brotli للفك السريع، والملف الأصغر يُنقل أسرع عبر الشبكة.

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2');
  font-display: swap;
}

.icon { font-family: 'MyIcons'; }
.icon-home::before { content: '\E001'; }

لاحظ أننا نُدرج إدخال src واحداً فقط — WOFF2 وحده. بتغطية 97%+ من المتصفحات، لا تحتاج كثير من المشاريع الحديثة بعد الآن إلى تنسيق احتياطي. تُخبر توجيهة font-display: swap المتصفح بعرض النص فوراً باستخدام خط احتياطي بينما يُحمَّل خط الأيقونات، مما يمنع النص غير المرئي.

يحظى WOFF2 بدعم واسع عبر جميع المتصفحات الحديثة. الثغرة الوحيدة المهمة هي Internet Explorer الذي أوقفت Microsoft دعمه في يونيو 2022.

يبلغ إجمالي التغطية العالمية المشتركة تقريباً 97%. يتكوّن الـ~3% المتبقية تقريباً بالكامل من تثبيتات IE القديمة ومتصفحات المحمول القديمة جداً.

لتوضيح ميزة ضغط WOFF2، إليك الأحجام النموذجية لخط أيقونات يحتوي على 200 حرف رسومي:

تتضاعف الوفورات مع مجموعات الأيقونات الأكبر. قد يكون خط من 500 حرف رسومي 200 KB كـ TTF و120 KB كـ WOFF و82 KB فقط كـ WOFF2. عبر آلاف تحميلات الصفحة، تُترجَم هذه الكيلوبايتات مباشرةً إلى أوقات رسم أسرع وتكاليف نطاق ترددي أقل.

دائماً. ينبغي أن يكون WOFF2 التنسيق الافتراضي لأي نشر لخط أيقونات على الويب. يوفر أصغر الملفات وأسرع فك الضغط ودعم متصفح شبه عالمي.

السيناريو الوحيد الذي لن تستخدم فيه WOFF2 هو إذا كنت تستهدف Internet Explorer — في هذه الحالة، اقرنه بـWOFF كاحتياطي:

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2'),
       url('icons.woff') format('woff');
  font-display: swap;
}

تأخذ المتصفحات الحديثة ملف WOFF2؛ يتراجع IE 11 إلى WOFF. يحصل الجميع على الخط، ويحصل الجميع عليه مضغوطاً.