عرض مصدر CSS/font-weight

<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">
/* كلمات محجوزة */
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;
</syntaxhighlight>
{| 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> إذ تحولان إلى القيم الحقيقة.
|}

== أمثلة ==
مثال عن استخدام الخاصية <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>I'm bold</p>

<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
p {
  font-weight: bold;
}

div {
 font-weight: 600;
}

span {
  font-weight: lighter;
}
</syntaxhighlight>احرص على تجربة المثال السابق مع خطٍ له عدِّة أوزان لكي يكون أثر هذه القيمة واضحًا.
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|2.0
|1.0
|3.0
|3.5
|1.3
|}

== البنية العامة ==
تقبل الخاصية <code>font-weight</code> كلمةً محجوزةً وحيدةً من الكلمات التالية.

=== القيمة <code>normal</code> ===
تحديد الوزن العادي من الخط. هذه القيمة مكافئة للقيمة <code>400</code>.

=== القيمة <code>bold</code> ===
تحديد الوزن الثخين من الخط. هذه القيمة مكافئة للقيمة <code>700</code>.

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

=== القيمة <code>bold</code> ===
اختيار نسخة أكثر ثخنًا من العنصر الأب (من الأوزان المتاحة للخط).

=== القيم <code>100</code> و <code>200</code> و <code>300</code> و <code>400</code> و <code>500</code> و <code>600</code> و <code>700</code> و <code>800</code> و <code>900</code> ===
قيم عددية لوزن الخط تستعمل مع الخطوط التي توفِّر أوزان أكثر من <code>normal</code> و <code>bold</code>.

إذا لم يكن وزنٌ من الأوزان متاحًا، فستستخدم الخوارزمية الآتية لتحديد ما هو الوزن الذي سيُعرَض:
* إذا كان الوزن أكبر من <code>500</code>، فسيستخدم أقرب وزن أثقل منه إن توافر، وإن لم يتوافر فسيستخدم أقرب وزن أخف منه.
* إذا كان الوزن أقل من <code>400</code>، فسيستخدم أقرب وزن أخف منه إن توافر، وإن لم يتوافر فسيستخدم أقرب وزن أثقل منه.
* إذا كان الوزن يساوي <code>400</code>، فسيستخدم الوزن <code>500</code>، وإن لم يكن الوزن <code>500</code> متوافرًا فستطبّق قاعدة الأوزان الأقل من <code>400</code>.
* إذا كان الوزن يساوي <code>500</code>، فسيستخدم الوزن <code>400</code>، وإن لم يكن الوزن <code>400</code> متوافرًا فستطبّق قاعدة الأوزان الأقل من <code>400</code>.
الكلام السابق يعني أنَّه إذا وفّر الخط وزنين هما <code>normal</code> و <code>bold</code>، فإنَّ الأوزان من <code>100</code> إلى <code>500</code> هي <code>normal</code> ومن <code>600</code> إلى <code>900</code> هي <code>bold</code>.

=== معنى الأوزان النسبية ===
سيوضِّح الجدول الآتي ماذا سيحدث عند استخدام الكلمتين المحجوزتين <code>lighter</code> أو <code>bolder</code>:
{| class="wikitable"
!القيمة الموروثة
!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) بأسماءٍ شائعة للأوزان:
{| class="wikitable"
!القيمة الرقمية
!الاسم الشائع
|-
|100
|Thin
|-
|200
|Extra Light
|-
|300
|Light
|-
|400
|Normal
|-
|500
|Medium
|-
|600
|Semi Bold
|-
|700
|Bold
|-
|800
|Extra Bold
|-
|900
|Heavy
|}

=== البنية الرسمية ===
<syntaxhighlight lang="css">
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;

</syntaxhighlight>
== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-fonts-3/#font-weight-prop CSS Fonts Module Level 3].
* مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions].
* مواصفة ‎[http://www.w3.org/TR/CSS2/fonts.html#propdef-font-weight CSS Level 2 (Revision 1)‎].
* مواصفة [http://www.w3.org/TR/CSS1/#font-weight CSS Level 1].
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Font|{{SUBPAGENAME}}]]