التأكد من بقاء النص مرئيًا أثناء تحميل خط موقع ويب

غالبًا ما تكون الخطوط ملفات كبيرة تتطلّب وقتًا طويلاً للتحميل. تخفي بعض المتصفحات النص إلى أن يتم تحميل الخط مما يؤدي إلى وميض النص غير المرئي (FOIT).

أسباب تعذُّر إكمال عملية تدقيق عرض الخطوط في Lighthouse

يُبلغ Lighthouse عن أي عناوين URL للخطوط قد تعرض نصًا غير مرئي:

لقطة شاشة توضّح بقاء النص في Lighthouse Secure ظاهرًا أثناء تدقيق عمليات تحميل خط الويب.

كيفية تجنُّب عرض نص غير مرئي

تشير font-display API إلى طريقة عرض الخط عند استخدامه في نمط font-face ستُعلِم قيم font-display التالية المتصفّح باستخدام خط نظام إذا لم يكن الخط المخصّص جاهزًا:

  • swap
  • optional
  • fallback

مثال على لغة CSS

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

مثال على Google Fonts

أضِف المَعلمة &display=swap/&display=optional/&display=fallback إلى نهاية عنوان URL الخاص بخدمة "Google Fonts":

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

كيفية تجنُّب التغيُّرات في التنسيق الناتجة عن الخطوط المؤجَّلة

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

يمكن تخفيف تأثير مقياس CLS الناتج عن تحميل الخطوط باستخدام عمليات التحميل المُسبَق مع font-display: optional. ومع ذلك، يمكن أن يؤثّر الإفراط في استخدام عمليات التحميل المُسبَق سلبًا في مقاييس التحميل. ننصح بإجراء اختبار A/B للتأكّد من أنّ التحميل المُسبق للخطوط لا يقدّم أي تراجع الأداء.

إرشادات خاصة بالحِزم

Drupal

حدِّد @font-display عند تحديد خطوط مخصّصة في المظهر.

Magento

حدِّد @font-display عند تحديد خطوط مخصّصة.

الموارد