CSS/font-weight

الخاصية font-weight في CSS تُحدِّد «وزن» (weight، أو ثخانة) الخط؛ والأوزان المتاحة للاستخدام في خطٍ ما تعتمد على نوع الخط المستخدم font-family، إذ إنَّ بعض الخطوط لا توفِّر إلا نسختين هما normal و bold.

/* كلمات محجوزة */
font-weight: normal;
font-weight: bold;

/* كلمات محجوزة نسبةً إلى العنصر الأب */
font-weight: lighter;
font-weight: bolder;

/* قيم عددية */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/* القيم العامة */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

القيمة الابتدائية	normal
تُطبَّق على	جميع العناصر.
قابلة للوراثة	نعم
قابلة للتحريك	نعم
القيمة المحسوبة	الكلمة المحجوزة أو القيمة الرقمية كما حُدِّدَت، ما عدا bolder و lighter إذ تحولان إلى القيم الحقيقة.

أمثلة

مثال عن استخدام الخاصية font-weight مع عدِّة قيم، إذ سنعرض الفقرة <p> بالوزن bold، وعنصر <div> سيكون ثخينًا لكنه أقل ثخنًا من bold، وسيكون العنصر <span> الموجود داخل العنصر <div> أخف منه بدرجة (lighter).

<p>I'm bold</p>

<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>

شيفرة CSS:

p {
  font-weight: bold;
}

div {
 font-weight: 600;
}

span {
  font-weight: lighter;
}

احرص على تجربة المثال السابق مع خطٍ له عدِّة أوزان لكي يكون أثر هذه القيمة واضحًا.

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	2.0	1.0	3.0	3.5	1.3

البنية العامة

تقبل الخاصية font-weight كلمةً محجوزةً وحيدةً من الكلمات التالية.

القيمة normal

تحديد الوزن العادي من الخط. هذه القيمة مكافئة للقيمة 400.

القيمة bold

تحديد الوزن الثخين من الخط. هذه القيمة مكافئة للقيمة 700.

القيمة lighter

اختيار نسخة أقل ثخنًا من العنصر الأب (من الأوزان المتاحة للخط).

القيمة bold

اختيار نسخة أكثر ثخنًا من العنصر الأب (من الأوزان المتاحة للخط).

القيم 100 و 200 و 300 و 400 و 500 و 600 و 700 و 800 و 900

قيم عددية لوزن الخط تستعمل مع الخطوط التي توفِّر أوزان أكثر من normal و bold.

إذا لم يكن وزنٌ من الأوزان متاحًا، فستستخدم الخوارزمية الآتية لتحديد ما هو الوزن الذي سيُعرَض:

• إذا كان الوزن أكبر من 500، فسيستخدم أقرب وزن أثقل منه إن توافر، وإن لم يتوافر فسيستخدم أقرب وزن أخف منه.
• إذا كان الوزن أقل من 400، فسيستخدم أقرب وزن أخف منه إن توافر، وإن لم يتوافر فسيستخدم أقرب وزن أثقل منه.
• إذا كان الوزن يساوي 400، فسيستخدم الوزن 500، وإن لم يكن الوزن 500 متوافرًا فستطبّق قاعدة الأوزان الأقل من 400.
• إذا كان الوزن يساوي 500، فسيستخدم الوزن 400، وإن لم يكن الوزن 400 متوافرًا فستطبّق قاعدة الأوزان الأقل من 400.

الكلام السابق يعني أنَّه إذا وفّر الخط وزنين هما normal و bold، فإنَّ الأوزان من 100 إلى 500 هي normal ومن 600 إلى 900 هي bold.

معنى الأوزان النسبية

سيوضِّح الجدول الآتي ماذا سيحدث عند استخدام الكلمتين المحجوزتين lighter أو bolder:

القيمة الموروثة	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

الأسماء الشائعة للأوزان

ترتبط القيم الرقمية (من 100 إلى 900) بأسماءٍ شائعة للأوزان:

القيمة الرقمية	الاسم الشائع
100	Thin
200	Extra Light
300	Light
400	Normal
500	Medium
600	Semi Bold
700	Bold
800	Extra Bold
900	Heavy

البنية الرسمية

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;

مصادر ومواصفات

• مواصفة CSS Fonts Module Level 3.
• مسودة CSS Transitions.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.