شرح صفوف ومحتوى الفقرة
لأن وجود العائلة الاحتياطية يُبقي النص مقروءاً حتى لو كان مسار ملف الخط خاطئاً، لا تكتفِ بالنظر السريع إلى الصفحة للتأكد من نجاح قاعدة @font-face، بل تحقّق عملياً عبر خطوتين داخل أدوات المطور DevTools:
- فحص تبويب
Networkمع مرشحFont: أعد تحميل الصفحة وتأكد من ظهور ملف.woff2المحلي بحالة نجاح200وعدم رجوع خطأ مسار مفقود404. - فحص قسم
Rendered Fontsأسفل لوحةComputed: حدد عنصر العنوان أو الفقرة في فاحص العناصر وانتقل إلى نهاية قائمة الأنماط المحسوبة؛ فهناك يذكر المتصفح صراحةً اسم الخط الفعلي المرسوم على الشاشة وعدد الحروف المأخوذة من ملف الشبكة أو من خط النظام البديل.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
اختتمت بهذا الدرس فصل خطوط CSS بإتقان تعريف الخطوط المحلية عبر @font-face وصيغة WOFF2، وربط الأوزان الحقيقية والمتغيرة 100 900، وتفعيل العرض الفوري عبر font-display: swap; مع حماية الخصوصية وفحص التحميل في DevTools. في الخطوة التالية نفتتح فصلاً جديداً مع درس لون الخلفية في لغة CSS.