font-weight

خاصية وزن الخط font-weight

خاصية font-weight تضبط سماكة الحرف من 100 الرفيع حتى 900 الأسود — سلاح الهرمية البصرية الأول.

الأرقام من 100 إلى 900: النص العادي 400، والغامق bold يساوي 700، وبينهما كنزا الواجهات الحديثة: 500 (medium) و600 (semibold) — تمييز أنيق بلا صراخ 700، وهما توقيع الواجهات الراقية.

الشرط الذي يُنسى: الوزن يجب أن يكون **محمّلًا** من ملف الخط — تطلب 600 وما حمّلت إلا 400 و700؟ المتصفح «يزيّف» غمقة قبيحة (faux bold) أو يقفز لأقرب وزن. ولا تنس دلالات HTML: للأهمية الحقيقية strong لا مجرد وزن بصري.

الصياغة

h2   { font-weight: 700; }
.semibold { font-weight: 600; }
p    { font-weight: 400; }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>.w div { margin: 2px 0; font-size: 18px; }</style>
<div class="w">
  <div style="font-weight:300">خفيف 300</div>
  <div style="font-weight:400">عادي 400</div>
  <div style="font-weight:600">شبه غامق 600 — نجم الواجهات</div>
  <div style="font-weight:800">ثقيل 800</div>
</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
400 / 700	normal وbold — الثنائي الكلاسيكي
500 / 600	medium وsemibold — تمييز راقٍ بلا صراخ
100–900	السلم الكامل — بشرط تحميل الأوزان من ملف الخط

💡 نصائح عملية

أزرار وعناوين بطاقات: 600 بدل 700 — قوة بلا ثقل
الخطوط المتغيرة variable fonts تعطيك السلم كله بملف واحد

⚠️ أخطاء شائعة

طلب وزن غير محمّل → غمقة مزيفة مشوهة خاصة بالعربية
b وspan غامقة للأهمية الدلالية — تلك وظيفة strong

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs