الفرق بين المراجعتين لصفحة: «CSS/font-style»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| (1 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 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>. | الخاصية <code>font-style</code> في CSS تُحدِّد إن كان يجب أن يكون شكل الخط عاديًا (normal) أو مائلًا (italic) أو منحرفًا (oblique). وسيختار المتصفح النسخة الأنسب من نوع الخط <code>[[CSS/font-family|font-family]]</code>. | ||
== بطاقة الخاصية == | |||
{| 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) يُمثِّل نسخةً منحرفة بزاوية معيّنة من الخط العادي؛ وعند عدم توافر نسخة مائلة مخصصة من الخط، فسيكون شكل الخط المائل والمنحرف سواءً. | |||
== أمثلة == | == أمثلة == | ||
مثال عن استخدام الخاصية <code>font-style</code> مع عدِّة قيم:<syntaxhighlight lang="html"> | مثال عن استخدام الخاصية <code>font-style</code> مع عدِّة قيم:<syntaxhighlight lang="html"> | ||
<p class="normal"> | <p class="normal">هذه الفقرة بالخط الطبيعي</p> | ||
<p class="italic"> | <p class="italic">هذه الفقرة بالخط المائل</p> | ||
<p class="oblique"> | <p class="oblique">هذه الفقرة بالخط المنحرف</p> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
.normal { | .normal { | ||
| سطر 67: | سطر 71: | ||
تقبل الخاصية <code>font-style</code> كلمةً محجوزةً من الكلمات التالية. | تقبل الخاصية <code>font-style</code> كلمةً محجوزةً من الكلمات التالية. | ||
=== | === <code>normal</code> === | ||
تحديد النسخة العادية من الخط. | تحديد النسخة العادية من الخط. | ||
=== | === <code>italic</code> === | ||
اختيار نسخة مُصنَّفة على أنها مائلة (italic)، وإن لم تتوافر نسخة مائلة، فستستخدم النسخة المنحرفة من الخط <code>oblique</code>، وإن لم تتوفر كلا النسختين، فسيحاكى الخط المائل من المتصفح. | اختيار نسخة مُصنَّفة على أنها مائلة (italic)، وإن لم تتوافر نسخة مائلة، فستستخدم النسخة المنحرفة من الخط <code>oblique</code>، وإن لم تتوفر كلا النسختين، فسيحاكى الخط المائل من المتصفح. | ||
=== | === <code>oblique</code> === | ||
اختيار نسخة مُصنَّفة على أنها منحرفة (oblique)، وإن لم تتوافر نسخة منحرفة، فستستخدم النسخة المائلة من الخط <code>italic </code>، وإن لم تتوفر كلا النسختين، فسيحاكى الخط المائل من المتصفح. | اختيار نسخة مُصنَّفة على أنها منحرفة (oblique)، وإن لم تتوافر نسخة منحرفة، فستستخدم النسخة المائلة من الخط <code>italic </code>، وإن لم تتوفر كلا النسختين، فسيحاكى الخط المائل من المتصفح. | ||
| سطر 81: | سطر 85: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصية <code>[[CSS/font|font]]</code> التي تؤدي إلى ضبط قيم الخاصيات الفرعية <code>[[CSS/font-weight|font-weight]]</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-style-prop CSS Fonts Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-fonts-3/#font-style-prop CSS Fonts Module Level 3]. | ||
المراجعة الحالية بتاريخ 07:21، 26 يوليو 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">هذه الفقرة بالخط الطبيعي</p>
<p class="italic">هذه الفقرة بالخط المائل</p>
<p class="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;
انظر أيضًا
- صفحة الخاصية
fontالتي تؤدي إلى ضبط قيم الخاصيات الفرعيةfont-weightوfont-sizeوfont-size-adjustوline-height. - صفحة الخاصية
colorالتي تضبط القيمة اللونية للعناصر.
مصادر ومواصفات
- مواصفة CSS Fonts Module Level 3.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.