خاصية font-weight
آخر تحديث: 2026-09-13
font-weight خاصية font-weight
تحدد خاصية font-weight في CSS سُمك النص. تقبل الكلمات الأساسية المسماة بالإضافة إلى القيم الرقمية من 1 إلى 1000، ويُستخدم النص الغامق عادةً للعناوين والتأكيد.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | نعم |
| ينطبق على | all |
| نوع الحركة | font-weight |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
font-weight: normal | bold | bolder | lighter | <number [1,1000]>;
⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
normal | bold | bolder | lighter | كلمة مفتاحية | كلمات أساسية للوزن محددة مسبقًا |
<number [1,1000]> | النوع | قيمة وزن رقمية، مثل 400 أو 700 |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح | |||||
|---|---|---|---|---|---|
| font-weight | ✓ v2 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح: يساوي 400 القيمة normal و700 يساوي bold؛ وهذان هما القيمتان الأكثر شيوعًا.
تحذير: ليست كل الخطوط تحتوي على كل الأوزان. تتم مطابقة الأوزان المفقودة مع أقرب وزن متاح بواسطة المتصفح، لذا قد تختلف النتيجة المعروضة.
❓ الأسئلة الشائعة
Qماذا تعني الكلمتان bolder وlighter في font-weight؟
Aهما كلمتان أساسيتان نسبيتان: تجعل bolder الوزن أثقل بخطوة واحدة من العنصر الأب، وlighter أخف بخطوة. فمثلًا إذا كان الأب 400، فإن bolder تُحل إلى 700؛ وإذا كان الأب هو الوزن الأثقل بالفعل، يظل دون تغيير. هما مفيدتان للتعديلات النسبية الموروثة، لكن القيم الرقمية تمنح تحكمًا أدق.
Qكيف أستخدم القيم الرقمية مع خاصية font-weight في CSS؟
Aتقبل الخاصية أرقامًا من 1 إلى 1000. عادةً ما توفّر الخطوط العادية أوزانًا بمئة (100 و200 و... و900)، حيث يقابل 400 القيمة normal و700 يقابل bold. يمكن للخطوط المتغيرة أن تأخذ أي قيمة وسطية، مما يتيح أيضًا تحريك انتقالات الوزن باستخدام CSS.
Qلماذا لا يظهر أي تأثير لـ font-weight: bold على محتوى النص لدي؟
Aالأسباب المعتادة: الخط المختار لا يحتوي على وجه غامق، لذا يستبدل المتصفح بأقرب وزن أو يركّب مظهرًا غامقًا؛ أو أن قاعدة لاحقة تلغي التصريح. عادةً ما توفّر خطوط النظام الصينية regular وbold فقط، لذا تُحل القيم مثل 800 أو 900 إلى bold وتبدو متطابقة.