بدءًا من الإصدار 83 من Chrome، يمكن الجمع بين link rel="preload" وfont-display: optional لإزالة مشكلة عدم استقرار التنسيق تمامًا
من خلال تحسين دورات العرض، يمنع Chrome 83 تغيُّر التصميم عند التحميل المُسبق للخطوط الاختيارية.
يُعدّ الجمع بين <link rel="preload"> وfont-display: optional الطريقة الأكثر فعالية
لضمان عدم حدوث أي خلل في التنسيق عند عرض الخطوط المخصّصة.
توافُق المتصفح
يمكنك الاطّلاع على بيانات MDN للحصول على معلومات محدّثة حول التوافق مع المتصفّحات المختلفة:
عرض الخطوط
يحدث تغيير التنسيق أو إعادة التنسيق عندما يتغيّر أحد الموارد على صفحة ويب بشكل ديناميكي، ما يؤدي إلى "تغيير" في المحتوى. يمكن أن يؤدي جلب خطوط الويب وعرضها مباشرةً إلى حدوث تغيّرات في التصميم بإحدى الطريقتين التاليتين:
- يتم تبديل خط احتياطي بخط جديد ("وميض نص بدون نمط")
- يتم عرض نص "غير مرئي" إلى أن يتم عرض خط جديد في الصفحة ("وميض النص غير المرئي")
توفّر السمة font-display في CSS طريقة لتعديل سلوك عرض الخطوط المخصّصة من خلال مجموعة من القيم المختلفة المسموح بها (auto وblock وswap وfallback وoptional). يعتمد اختيار القيمة التي سيتم استخدامها على السلوك المفضّل للخطوط التي يتم تحميلها بشكل غير متزامن. ومع ذلك، يمكن لكل من هذه القيم المسموح بها أن تؤدي إلى إعادة التنسيق
بإحدى الطريقتين المذكورتين أعلاه، حتى الآن.
الخطوط الاختيارية
تستخدم السمة font-display مخططًا زمنيًا من ثلاث فترات للتعامل مع الخطوط التي يجب تنزيلها قبل عرضها:
- الحظر: يتم عرض نص "غير مرئي"، ولكن يتم التبديل إلى خط الويب فور انتهاء تحميله.
- التبديل: يتم عرض النص باستخدام خط نظام احتياطي، ولكن يتم التبديل إلى خط الويب فور انتهاء تحميله.
- الخيار البديل: عرض النص باستخدام خط نظام احتياطي
في السابق، كانت الخطوط المحدّدة باستخدام font-display: optional تتضمّن فترة حظر تبلغ 100 ملي ثانية ولا تتضمّن فترة تبديل. وهذا يعني أنّ النص "غير المرئي" يتم عرضه لفترة وجيزة جدًا قبل التبديل إلى خط احتياطي. إذا لم يتم تنزيل الخط في غضون 100 ملي ثانية، يتم استخدام الخط الاحتياطي ولا يتم إجراء أي تبديل.
font-display: optional في Chrome عند تنزيل الخط بعد فترة الحظر التي تبلغ 100 ملي ثانيةومع ذلك، في حال تنزيل الخط قبل اكتمال فترة الحظر التي تبلغ 100 ملي ثانية، يتم عرض الخط المخصّص واستخدامه في الصفحة.
font-display: optional في Chrome عند تنزيل الخط قبل فترة الحظر التي تبلغ 100 ملي ثانيةيعيد Chrome عرض الصفحة مرتين في كلتا الحالتين، بغض النظر عمّا إذا كان الخط الاحتياطي مستخدَمًا أو إذا انتهى تحميل الخط المخصّص في الوقت المناسب. يؤدي ذلك إلى وميض طفيف للنص غير المرئي، وفي الحالات التي يتم فيها عرض خط جديد، يحدث خلل في التنسيق يؤدي إلى نقل بعض محتوى الصفحة. يحدث ذلك حتى إذا كان الخط مخزّنًا في ذاكرة التخزين المؤقت للقرص في المتصفّح ويمكن تحميله قبل اكتمال فترة الحظر.
تم إجراء تحسينات في الإصدار 83 من Chrome لإزالة دورة العرض الأولى بالكامل للخطوط الاختيارية التي يتم تحميلها مسبقًا باستخدام <link rel="preload'>.
بدلاً من ذلك، يتم حظر العرض إلى أن ينتهي تحميل الخط المخصّص أو إلى أن تنقضي فترة زمنية معيّنة. تم ضبط فترة المهلة هذه حاليًا على 100 ملي ثانية، ولكن من المحتمل أن تتغيّر في المستقبل القريب لتحسين الأداء.
font-display: optional الجديد في Chrome عند تحميل الخطوط مسبقًا وتنزيل الخط بعد فترة الحظر التي تبلغ 100 ملي ثانية (بدون وميض النص غير المرئي)
font-display: optional الجديد في Chrome عند تحميل الخطوط مسبقًا وتنزيل الخط قبل فترة الحظر التي تبلغ 100 ملي ثانية (بدون وميض النص غير المرئي)يؤدي التحميل المُسبق للخطوط الاختيارية في Chrome إلى إزالة احتمال حدوث خلل في التنسيق وظهور نص غير منسَّق. يتطابق هذا مع السلوك المطلوب كما هو محدّد في CSS Fonts Module Level 4 حيث لا ينبغي أن تتسبب الخطوط الاختيارية في إعادة التخطيط ويمكن لوكلاء المستخدم بدلاً من ذلك تأخير العرض لفترة زمنية مناسبة.
على الرغم من أنّه ليس من الضروري تحميل خط اختياري مسبقًا، إلا أنّ ذلك يحسّن بشكل كبير فرصة تحميله قبل دورة العرض الأولى، خاصةً إذا لم يكن مخزّنًا بعد في ذاكرة التخزين المؤقت للمتصفّح.
الخاتمة
يسرّ فريق Chrome معرفة تجاربك في التحميل المُسبق للخطوط الاختيارية باستخدام هذه التحسينات الجديدة. أبلِغ عن مشكلة إذا واجهت أي مشاكل أو أردت تقديم أي اقتراحات بشأن الميزات.