انتقل إلى محتوى الدرس

Preventing Invisible Text With Swap منع اختفاء النص بخاصية swap

تعلّم استضافة الخطوط المخصصة محلياً عبر قاعدة @font-face بصيغة WOFF2، وربط الأوزان المتغيرة ومنع اختفاء النص بخاصية swap مع الحفاظ على خصوصية الزوار.
2 صفوف تعليمية
لغة CSS
2 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عند تحميل خط مخصص عبر شبكة هاتف بطيئة دون تحديد سلوك العرض، قد تُخفي المتصفحات النصوص تماماً لعدة ثوانٍ بانتظار وصول ملف الخط — وهي ظاهرة مزعجة تُعرف بوميض النص المخفي (FOIT). يعالج الواصف font-display: swap; داخل كتلة @font-face هذه المشكلة جذرياً؛ إذ يعرض النص فوراً بالخط الاحتياطي المحلي منذ اللحظة الأولى ثم يستبدله بالخط المخصص فور اكتمال تنزيله.

قارن بين الإعدادات الثلاثة عملياً في المختبر التفاعلي التالي:

الصف 2 معاينة حية