منع تغيير التنسيق وميض النص غير المرئي (FOIT) من خلال التحميل المُسبق للخطوط الاختيارية

بدءًا من Chrome 83، يمكن الجمع بين الرابط rel="preload" وfont-display: الاختيارية لإزالة البيانات غير المحتملة للتنسيق تمامًا

Houssein Djirdeh

ومن خلال تحسين دورات العرض، يحدّ Chrome 83 من متغيّرات التصميم عند التحميل المُسبق للخطوط الاختيارية. إنّ الجمع بين <link rel="preload"> وfont-display: optional هو الطريقة الأكثر فعالية لضمان عدم أي أعطال في التنسيق عند عرض خطوط مخصّصة.

توافُق المتصفح

راجع بيانات MDN للحصول على معلومات دعم عبر المتصفحات المحدّثة:

• <link rel="preload">
• font-display

عرض الخط

يحدث تغيير التخطيط أو إعادة التنسيق عندما يتغير مورد على صفحة الويب بشكل ديناميكي، مما يؤدي إلى "تحول" المحتوى. يمكن أن يؤدي جلب خطوط الويب وعرضها مباشرةً إلى حدوث متغيّرات في التنسيق بإحدى الطريقتين التاليتين:

• يتم استبدال خط احتياطي بخط جديد ("فلاش من نص بدون نمط")
• يظهر النص "غير المرئي" إلى أن يتم عرض خط جديد في الصفحة ("فلاش نص غير مرئي")

توفّر سمة CSS font-display طريقة لتعديل سلوك عرض الخطوط المخصّصة من خلال مجموعة من القيم المختلفة المتوافقة (auto وblock وswap وfallback وoptional). يعتمد اختيار القيمة المطلوب استخدامها على السلوك المفضّل للخطوط التي يتم تحميلها بشكل غير متزامن. ومع ذلك، يمكن أن تؤدي كل قيمة من هذه القيم المعتمدة إلى إعادة التخطيط بإحدى الطريقتين المذكورة أعلاه، حتى الآن!

الخطوط الاختيارية

تستخدم السمة font-display مخططًا زمنيًا لثلاث فترات للتعامل مع الخطوط التي يجب تنزيلها قبل عرضها:

• الحظر: تعرض النص "غير المرئي"، مع التبديل إلى الخط على الويب فور انتهاء التحميل.
• التبديل: يمكنك عرض النص باستخدام خط احتياطي للنظام، ولكن مع التبديل إلى خط الويب فور انتهاء التحميل.
• تعذّر: يمكنك عرض النص باستخدام خط احتياطي للنظام.

في السابق، كانت مدة حظر الخطوط التي تم ضبطها باستخدام font-display: optional هي 100 ملي ثانية وبدون فترة تبديل. هذا يعني أنه سيتم عرض النص "غير المرئي" لفترة قصيرة جدًا قبل التبديل إلى خط احتياطي. إذا لم يتم تنزيل الخط خلال 100 ملي ثانية، سيتم استخدام الخط الاحتياطي ولن يحدث أي تبديل.

ومع ذلك، في حال تنزيل الخط قبل اكتمال فترة الحظر التي تبلغ 100 ملي ثانية، يتم عرض الخط المخصّص واستخدامه في الصفحة.

يعيد Chrome عرض الصفحة مرتين في كلتا الحالتين، بغض النظر عمّا إذا كان قد تم استخدام الخط الاحتياطي أو ما إذا كان الخط المخصّص قد انتهى من التحميل في الوقت المناسب. ويتسبب هذا في ظهور وميض طفيف لنص غير مرئي، وفي الحالات التي يتم فيها عرض خط جديد، قد يحدث خلل في التخطيط يؤدي إلى نقل بعض محتوى الصفحة. ويحدث ذلك حتى إذا كان الخط مخزَّنًا في ذاكرة التخزين المؤقت على القرص في المتصفّح ويمكن تحميله قبل اكتمال فترة الحظر.

وصلت التحسينات إلى الإصدار 83 من Chrome لإزالة أول دورة عرض بالكامل للخطوط الاختيارية التي تم تحميلها مُسبقًا باستخدام <link rel="preload'>. وبدلاً من ذلك، يتم حظر العرض إلى أن ينتهي تحميل الخط المخصّص أو إلى حين انقضاء فترة زمنية معيّنة. تم ضبط فترة المهلة هذه حاليًا على 100 ملي ثانية، ولكن من المحتمل أن تتغير في المستقبل القريب لتحسين الأداء.

يؤدي التحميل المسبق للخطوط الاختيارية في Chrome إلى إزالة إمكانية البيانات العشوائية للتنسيق ووميض النصوص غير النموذجية. يتوافق هذا مع السلوك المطلوب كما هو محدّد في المستوى 4 من وحدة CSS Fonts حيث يجب ألا تتسبب الخطوط الاختيارية في إعادة التنسيق مطلقًا، كما يمكن لبرامج وكيل المستخدم تأخير العرض لفترة زمنية مناسبة.

على الرغم من أنّه ليس من الضروري تحميل خط اختياري مسبقًا، إلا أنّ ذلك يحسّن بشكل كبير من فرصة تحميله قبل دورة العرض الأولى، خاصةً إذا لم يكن مخزّنًا بعد في ذاكرة التخزين المؤقت للمتصفح.

الخلاصة

يهتم فريق Chrome بالتعرُّف على تجاربك في تحميل الخطوط الاختيارية مسبقًا باستخدام هذه التحسينات الجديدة التي تم تطبيقها! يُرجى الإبلاغ عن مشكلة إذا واجهت أي مشاكل أو إذا أردت تجاهل أي اقتراحات بشأن الميزات.