الفرق بين المراجعتين ل"CSS/font-style"

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>font-style</code>}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>font-style</code>}}</noinclude>
الخاصية <code>font-style</code> في CSS تُحدِّد إن كان يجب أن يكون شكل الخط عاديًا (normal) أو مائلًا (italic) أو منحرفًا (oblique). وسيختار المتصفح النسخة الأنسب من نوع الخط <code>[[CSS/font-family|font-family]]</code>.<syntaxhighlight lang="css">
+
الخاصية <code>font-style</code> في CSS تُحدِّد إن كان يجب أن يكون شكل الخط عاديًا (normal) أو مائلًا (italic) أو منحرفًا (oblique). وسيختار المتصفح النسخة الأنسب من نوع الخط <code>[[CSS/font-family|font-family]]</code>.
/* كلمات محجوزة */
 
font-style: normal;
 
font-style: italic;
 
font-style: oblique;
 
  
/* القيم العامة */
+
== بطاقة الخاصية ==
font-style: inherit;
 
font-style: initial;
 
font-style: unset;
 
</syntaxhighlight>يكون للخط المائل بعض سمات الكتابة اليدوية، ويستهلك عادةً مسافة أفقية أقل من الخط العادي، بينما الخط المنحرف (oblique) يُمثِّل نسخةً منحرفة بزاوية معيّنة من الخط العادي؛ وعند عدم توافر نسخة مائلة مخصصة من الخط، فسيكون شكل الخط المائل والمنحرف سواءً.
 
 
{| class="wikitable" style="width: 100%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 28: سطر 20:
 
|كما حُدِّدَت.
 
|كما حُدِّدَت.
 
|}
 
|}
 +
 +
<syntaxhighlight lang="css">
 +
/* كلمات محجوزة */
 +
font-style: normal;
 +
font-style: italic;
 +
font-style: oblique;
 +
 +
/* القيم العامة */
 +
font-style: inherit;
 +
font-style: initial;
 +
font-style: unset;
 +
</syntaxhighlight>يكون للخط المائل بعض سمات الكتابة اليدوية، ويستهلك عادةً مسافة أفقية أقل من الخط العادي، بينما الخط المنحرف (oblique) يُمثِّل نسخةً منحرفة بزاوية معيّنة من الخط العادي؛ وعند عدم توافر نسخة مائلة مخصصة من الخط، فسيكون شكل الخط المائل والمنحرف سواءً.
  
 
== أمثلة ==
 
== أمثلة ==
سطر 67: سطر 71:
 
تقبل الخاصية <code>font-style</code> كلمةً محجوزةً من الكلمات التالية.
 
تقبل الخاصية <code>font-style</code> كلمةً محجوزةً من الكلمات التالية.
  
=== القيمة <code>normal</code> ===
+
=== <code>normal</code> ===
 
تحديد النسخة العادية من الخط.
 
تحديد النسخة العادية من الخط.
  
=== القيمة <code>italic</code> ===
+
=== <code>italic</code> ===
 
اختيار نسخة مُصنَّفة على أنها مائلة (italic)، وإن لم تتوافر نسخة مائلة، فستستخدم النسخة المنحرفة من الخط <code>oblique</code>، وإن لم تتوفر كلا النسختين، فسيحاكى الخط المائل من المتصفح.
 
اختيار نسخة مُصنَّفة على أنها مائلة (italic)، وإن لم تتوافر نسخة مائلة، فستستخدم النسخة المنحرفة من الخط <code>oblique</code>، وإن لم تتوفر كلا النسختين، فسيحاكى الخط المائل من المتصفح.
  
=== القيمة <code>oblique</code> ===
+
=== <code>oblique</code> ===
 
اختيار نسخة مُصنَّفة على أنها منحرفة (oblique)، وإن لم تتوافر نسخة منحرفة، فستستخدم النسخة المائلة من الخط <code>italic </code>، وإن لم تتوفر كلا النسختين، فسيحاكى الخط المائل من المتصفح.
 
اختيار نسخة مُصنَّفة على أنها منحرفة (oblique)، وإن لم تتوافر نسخة منحرفة، فستستخدم النسخة المائلة من الخط <code>italic </code>، وإن لم تتوفر كلا النسختين، فسيحاكى الخط المائل من المتصفح.
  

مراجعة 09:05، 25 يوليو 2018

الخاصية font-style في CSS تُحدِّد إن كان يجب أن يكون شكل الخط عاديًا (normal) أو مائلًا (italic) أو منحرفًا (oblique). وسيختار المتصفح النسخة الأنسب من نوع الخط font-family.

بطاقة الخاصية

القيمة الابتدائية normal
تُطبَّق على جميع العناصر.
قابلة للوراثة نعم
قابلة للتحريك لا
القيمة المحسوبة كما حُدِّدَت.
/* كلمات محجوزة */
font-style: normal;
font-style: italic;
font-style: oblique;

/* القيم العامة */
font-style: inherit;
font-style: initial;
font-style: unset;

يكون للخط المائل بعض سمات الكتابة اليدوية، ويستهلك عادةً مسافة أفقية أقل من الخط العادي، بينما الخط المنحرف (oblique) يُمثِّل نسخةً منحرفة بزاوية معيّنة من الخط العادي؛ وعند عدم توافر نسخة مائلة مخصصة من الخط، فسيكون شكل الخط المائل والمنحرف سواءً.

أمثلة

مثال عن استخدام الخاصية font-style مع عدِّة قيم:

<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>

شيفرة CSS:

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

احرص على تجربة المثال السابق مع خطٍ له نسخة مائلة (italic) لكي يكون أثر هذه القيمة واضحًا.

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 1.0 4.0 7.0 1.0

البنية العامة

تقبل الخاصية font-style كلمةً محجوزةً من الكلمات التالية.

normal

تحديد النسخة العادية من الخط.

italic

اختيار نسخة مُصنَّفة على أنها مائلة (italic)، وإن لم تتوافر نسخة مائلة، فستستخدم النسخة المنحرفة من الخط oblique، وإن لم تتوفر كلا النسختين، فسيحاكى الخط المائل من المتصفح.

oblique

اختيار نسخة مُصنَّفة على أنها منحرفة (oblique)، وإن لم تتوافر نسخة منحرفة، فستستخدم النسخة المائلة من الخط italic ، وإن لم تتوفر كلا النسختين، فسيحاكى الخط المائل من المتصفح.

البنية الرسمية

font-style: normal | italic | oblique;

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