الخاصية font-weight

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الخاصية 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;

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