اعتبارًا من Chrome 83، يمكن الجمع بين السمتَين 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 جدولاً زمنيًا يتضمّن ثلاث فترات للتعامل مع الخطوط التي يجب تنزيلها قبل أن يتم عرضها:
- Block: يتم عرض نص "غير مرئي"، ولكن يتم التبديل إلى خط الويب بمجرد اكتمال تحميله.
- Swap: يتم عرض النص باستخدام خط النظام الاحتياطي، ولكن يتم التبديل إلى خط الويب بمجرد اكتمال تحميله.
- Fail: يتم عرض النص باستخدام خط النظام الاحتياطي.
في السابق، كانت الخطوط التي تم تحديدها باستخدام font-display: optional تتضمّن فترة حظر مدتها 100 ملي ثانية ولا تتضمّن فترة تبديل. وهذا يعني أنّه يتم عرض نص "غير مرئي" لفترة وجيزة جدًا قبل التبديل إلى خط احتياطي. إذا لم يتم تنزيل الخط خلال 100 ملي ثانية، يتم استخدام الخط الاحتياطي ولا يحدث أي تبديل.
font-display: optional في Chrome عندما يتم تنزيل الخط بعد فترة الحظر التي تبلغ 100 ملي ثانيةومع ذلك، في حال تنزيل الخط قبل اكتمال فترة الحظر التي تبلغ 100 ملي ثانية، يتم عرض الخط المخصّص واستخدامه في الصفحة.
font-display: optional في Chrome عندما يتم تنزيل الخط قبل فترة الحظر التي تبلغ 100 ملي ثانيةيعيد Chrome عرض الصفحة مرّتَين في كلتا الحالتَين، بغض النظر عمّا إذا كان يتم استخدام الخط الاحتياطي أو إذا اكتمل تحميل الخط المخصّص في الوقت المناسب. يؤدي ذلك إلى ظهور وميض طفيف للنص غير المرئي، وفي الحالات التي يتم فيها عرض خط جديد، يحدث إيقاف مؤقت لعرض واجهة المستخدم الذي ينقل بعض محتوى الصفحة. يحدث ذلك حتى إذا كان الخط مخزّنًا في ذاكرة التخزين المؤقت للقرص في المتصفّح ويمكن تحميله قبل اكتمال فترة الحظر بفترة طويلة.
تم طرح تحسينات في Chrome 83 لإزالة دورة العرض الأولى بالكامل للخطوط الاختيارية
التي يتم تحميلها مسبقًا باستخدام <link rel="preload'>.
بدلاً من ذلك، يتم حظر العرض إلى أن يكتمل تحميل الخط المخصّص أو إلى أن تنقضي فترة زمنية معيّنة. تم ضبط فترة المهلة حاليًا على 100 ملي ثانية، ولكن من المحتمل أن تتغيّر في المستقبل القريب لتحسين الأداء.
font-display: optional في Chrome عندما يتم التحميل المسبق للخطوط ويتم تنزيل الخط بعد فترة الحظر التي تبلغ 100 ملي ثانية (لا يظهر النص غير المرئي)
font-display: optional في Chrome عندما يتم التحميل المسبق للخطوط ويتم تنزيل الخط قبل فترة الحظر التي تبلغ 100 ملي ثانية (لا يظهر النص غير المرئي)يؤدي التحميل المسبق للخطوط الاختيارية في Chrome إلى إزالة احتمالية حدوث مشكلة "تغيّر التصميم" و"ظهور النص غير المنسّق". يتطابق ذلك مع السلوك المطلوب كما هو محدّد في المستوى 4 من وحدة خطوط CSS، حيث يجب ألا تؤدي الخطوط الاختيارية أبدًا إلى إعادة التصميم ويمكن لوكلاء المستخدمين بدلاً من ذلك تأخير العرض لفترة زمنية مناسبة.
على الرغم من أنّه ليس من الضروري التحميل المسبق لخط اختياري، فإنّ ذلك يحسّن إلى حد كبير من احتمالية تحميله قبل دورة العرض الأولى، خاصةً إذا لم يكن مخزّنًا بعد في ذاكرة التخزين المؤقت للمتصفّح.
الخاتمة
يهتم فريق Chrome بمعرفة تجاربك مع التحميل المسبق للخطوط الاختيارية باستخدام هذه التحسينات الجديدة. يُرجى الإبلاغ عن مشكلة إذا واجهتك أي مشاكل أو إذا أردت تقديم أي اقتراحات بشأن الميزات.