الدرس 8 من 8

قوائم الخطوط

هدف الدرس

بديل جاهز لكل خطّ

01

الشرح

font-family قائمة لا اسم: يمرّ المتصفح عليها بالترتيب ويأخذ أول خطّ موجود على جهاز القارئ. فإن لم يجد شيئًا رسم بخطّه الافتراضي، وهو غالبًا خطّ مذيَّل كـ Times لا يشبه تصميمك في شيء.

لذلك تنتهي كل قائمة بعائلة عامة مثل sans-serif: ليست خطًّا بعينه بل وعد بأقرب خطّ من نوعها. وsystem-ui خطّ واجهة النظام نفسه، لا تنزيل فيه ولا انتظار. والخطّ المعلَن بـ @font-face يحتاج font-display: swap، وإلا أخفى المتصفح النصّ ثواني ينتظر الخطّ.

والفخّ الخفيّ علامات التنصيص: "sans-serif" بينها اسم خطّ لا وجود له، لا العائلة العامة، فتسقط القائمة كلها إلى الخطّ الافتراضي.

02

المطلوب

اجعل خطّ الصفحة system-ui تتبعه عائلة عامة، وأضف بعد "Wun Display" في .brand بدائل تنتهي بعائلة عامة، وأعطِ @font-face القيمة font-display: swap.

معايير التصحيح

4 معايير
  1. خطّ الصفحة system-ui
  2. وتليه عائلة عامة بلا تنصيص
  3. للعنوان بدائل بعد خطّه المخصّص
  4. @font-face يعلن font-display
index.html
المعاينة
index.html100%
–/4

اضغط «تشغيل» ليبدأ الفحص.

4 معايير في بطاقة «المطلوب».