الفرق بين المراجعتين لصفحة: «CSS/font-weight»

من موسوعة حسوب
< CSS
→ التعديل السابقالتعديل اللاحق ←
مرئينص الويكي
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}'
لا ملخص تعديل
سطر 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>
{| 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> إذ تحولان إلى القيم الحقيقة.
|}


== أمثلة ==
== أمثلة ==
سطر 83: سطر 87:
تقبل الخاصية <code>font-weight</code> كلمةً محجوزةً وحيدةً من الكلمات التالية.
تقبل الخاصية <code>font-weight</code> كلمةً محجوزةً وحيدةً من الكلمات التالية.


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


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


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


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


مراجعة 13:45، 25 يوليو 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>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;

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

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/font-weight&oldid=13636»