الخاصية 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.