الفرق بين المراجعتين لصفحة: «CSS/font-weight»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| (1 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>font-weight</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>font-weight</code>}}</noinclude> | ||
الخاصية <code>font-weight</code> في CSS تُحدِّد «وزن» (weight، أو ثخانة) الخط؛ والأوزان المتاحة للاستخدام في خطٍ ما تعتمد على نوع الخط المستخدم <code>[[CSS/font-family|font-family]]</code>، إذ إنَّ بعض الخطوط لا توفِّر إلا نسختين هما <code>normal</code> و <code>bold</code>.<syntaxhighlight lang="css"> | الخاصية <code>font-weight</code> في CSS تُحدِّد «وزن» (weight، أو ثخانة) الخط؛ والأوزان المتاحة للاستخدام في خطٍ ما تعتمد على نوع الخط المستخدم <code>[[CSS/font-family|font-family]]</code>، إذ إنَّ بعض الخطوط لا توفِّر إلا نسختين هما <code>normal</code> و <code>bold</code>. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | |||
|- | |||
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]] | |||
|<code>normal</code> | |||
|- | |||
! scope="row" |تُطبَّق على | |||
|جميع العناصر. | |||
|- | |||
! scope="row" |قابلة للوراثة | |||
|نعم | |||
|- | |||
!قابلة للتحريك | |||
|نعم | |||
|- | |||
! scope="row" |القيمة المحسوبة | |||
|الكلمة المحجوزة أو القيمة الرقمية كما حُدِّدَت، ما عدا <code>bolder</code> و <code>lighter</code> إذ تحولان إلى القيم الحقيقة. | |||
|} | |||
<syntaxhighlight lang="css"> | |||
/* كلمات محجوزة */ | /* كلمات محجوزة */ | ||
font-weight: normal; | font-weight: normal; | ||
| سطر 25: | سطر 46: | ||
font-weight: unset; | font-weight: unset; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
مثال عن استخدام الخاصية <code>font-weight</code> مع عدِّة قيم، إذ سنعرض الفقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code> بالوزن <code>bold</code>، وعنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> سيكون ثخينًا لكنه أقل ثخنًا من <code>bold</code>، وسيكون العنصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> الموجود داخل العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> أخف منه بدرجة (<code>lighter</code>).<syntaxhighlight lang="html"> | مثال عن استخدام الخاصية <code>font-weight</code> مع عدِّة قيم، إذ سنعرض الفقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code> بالوزن <code>bold</code>، وعنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> سيكون ثخينًا لكنه أقل ثخنًا من <code>bold</code>، وسيكون العنصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> الموجود داخل العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> أخف منه بدرجة (<code>lighter</code>).<syntaxhighlight lang="html"> | ||
<p> | <p>الخط ثخين</p> | ||
<div> | <div>الخط ثخين جداً<br/> | ||
<span> | <span>الخط رقيق</span> | ||
</div> | </div> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
| سطر 83: | سطر 87: | ||
تقبل الخاصية <code>font-weight</code> كلمةً محجوزةً وحيدةً من الكلمات التالية. | تقبل الخاصية <code>font-weight</code> كلمةً محجوزةً وحيدةً من الكلمات التالية. | ||
=== | === <code>normal</code> === | ||
تحديد الوزن العادي من الخط. هذه القيمة مكافئة للقيمة <code>400</code>. | تحديد الوزن العادي من الخط. هذه القيمة مكافئة للقيمة <code>400</code>. | ||
=== | === <code>bold</code> === | ||
تحديد الوزن الثخين من الخط. هذه القيمة مكافئة للقيمة <code>700</code>. | تحديد الوزن الثخين من الخط. هذه القيمة مكافئة للقيمة <code>700</code>. | ||
=== | === <code>lighter</code> === | ||
اختيار نسخة أقل ثخنًا من العنصر الأب (من الأوزان المتاحة للخط). | اختيار نسخة أقل ثخنًا من العنصر الأب (من الأوزان المتاحة للخط). | ||
=== | === <code>bold</code> === | ||
اختيار نسخة أكثر ثخنًا من العنصر الأب (من الأوزان المتاحة للخط). | اختيار نسخة أكثر ثخنًا من العنصر الأب (من الأوزان المتاحة للخط). | ||
| سطر 188: | سطر 192: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصية <code>[[CSS/font|font]]</code> التي تؤدي إلى ضبط قيم الخاصيات الفرعية <code>[[CSS/font-style|font-style]]</code> و <code>[[CSS/font-stretch|font-stretch]]</code> و <code>[[CSS/font-size|font-size]]</code> و <code>[[CSS/font-size-adjust|font-size-adjust]]</code> و <code>[[CSS/line-height|line-height]]</code>. | |||
* صفحة الخاصية <code>[[CSS/color|color]]</code> التي تضبط القيمة اللونية للعناصر. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-fonts-3/#font-weight-prop CSS Fonts Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-fonts-3/#font-weight-prop CSS Fonts Module Level 3]. | ||
المراجعة الحالية بتاريخ 07:25، 26 يوليو 2018
الخاصية font-weight في CSS تُحدِّد «وزن» (weight، أو ثخانة) الخط؛ والأوزان المتاحة للاستخدام في خطٍ ما تعتمد على نوع الخط المستخدم font-family، إذ إنَّ بعض الخطوط لا توفِّر إلا نسختين هما normal و bold.
بطاقة الخاصية
| القيمة الابتدائية | normal
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | نعم |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | الكلمة المحجوزة أو القيمة الرقمية كما حُدِّدَت، ما عدا bolder و lighter إذ تحولان إلى القيم الحقيقة.
|
/* كلمات محجوزة */
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;
أمثلة
مثال عن استخدام الخاصية font-weight مع عدِّة قيم، إذ سنعرض الفقرة <p> بالوزن bold، وعنصر <div> سيكون ثخينًا لكنه أقل ثخنًا من bold، وسيكون العنصر <span> الموجود داخل العنصر <div> أخف منه بدرجة (lighter).
<p>الخط ثخين</p>
<div>الخط ثخين جداً<br/>
<span>الخط رقيق</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;
انظر أيضًا
- صفحة الخاصية
fontالتي تؤدي إلى ضبط قيم الخاصيات الفرعيةfont-styleوfont-stretchوfont-sizeوfont-size-adjustوline-height. - صفحة الخاصية
colorالتي تضبط القيمة اللونية للعناصر.
مصادر ومواصفات
- مواصفة CSS Fonts Module Level 3.
- مسودة CSS Transitions.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.