العودة إلى الدورة

الدرس 29: وزن الخط ونمطه (font-weight, font-style)

إتقان CSS: من الصفر إلى الاحتراف في 100 درس

29. وزن الخط ونمطه

تتحكم هذه الخصائص في سمك النص وميله.

وزن الخط (font-weight)

تحدد هذه الخاصية مدى سمك أو نحافة الأحرف في النص. يمكن أن تأخذ كلمات محجوزة أو قيماً رقمية.

الكلمات المحجوزة:

  • normal (عادة ما يعادل 400)
  • bold (عادة ما يعادل 700)
  • lighter (نسبي للأب)
  • bolder (نسبي للأب)

القيم الرقمية (100 إلى 900):

تدعم عائلات الخطوط عادة الأوزان القياسية التالية:

القيمةاسم الوزن
100Thin / Hairline
400Normal / Regular
700Bold
900Black / Heavy

css .main-heading { font-weight: 700; }

.thin-text { font-weight: 200; /* يعمل فقط إذا كان ملف الخط يتضمن هذا الوزن! */ }

ملاحظة هامة: الوزن الرقمي الذي تحدده لن يعمل إلا إذا تم تحميل ملف الخط المقابل لهذا الوزن عبر @font-face أو Google Fonts. إذا طلبت 200 ولكنك حملت 400 و 700 فقط، فقد يستخدم المتصفح 400 كافتراضي.

نمط الخط (font-style)

تحدد هذه الخاصية نمط الخط، وتستخدم عادة للنص المائل.

  • normal
  • italic (يستخدم نسخة الخط المائلة المتخصصة، إذا كانت متوفرة)
  • oblique (يقوم المتصفح بإمالة الخط العادي صناعياً)

css blockquote { font-style: italic; }