الفرق بين المراجعتين ل"CSS/font-stretch"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>font-stretch</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>font-stretch</code>}}</noinclude> | ||
| − | الخاصية <code>font-stretch</code> في CSS تختار نسخةً ضيقةً (condensed) أو عاديةً (normal) أو موسعةً (expanded) من الخط.<syntaxhighlight lang="css"> | + | الخاصية <code>font-stretch</code> في CSS تختار نسخةً ضيقةً (condensed) أو عاديةً (normal) أو موسعةً (expanded) من الخط. |
| + | |||
| + | == بطاقة الخاصية == | ||
| + | {| class="wikitable" style="width: 100%;" | ||
| + | |- | ||
| + | ! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]] | ||
| + | |<code>normal</code> | ||
| + | |- | ||
| + | ! scope="row" |تُطبَّق على | ||
| + | |جميع العناصر. | ||
| + | |- | ||
| + | ! scope="row" |قابلة للوراثة | ||
| + | |نعم | ||
| + | |- | ||
| + | !قابلة للتحريك | ||
| + | |نعم | ||
| + | |- | ||
| + | ! scope="row" |القيمة المحسوبة | ||
| + | |كما حُدِّدَت. | ||
| + | |} | ||
| + | |||
| + | <syntaxhighlight lang="css"> | ||
/* كلمات محجوزة */ | /* كلمات محجوزة */ | ||
font-stretch: ultra-condensed; | font-stretch: ultra-condensed; | ||
| سطر 19: | سطر 40: | ||
[[ملف:Font-stretch.png|بديل=تبيين تأثير مختلف القيم لخاصية font-stretch على الخط المستعمل.|بدون|تصغير|تبيين تأثير مختلف القيم لخاصية <code>font-stretch</code> على الخط المستعمل.]] | [[ملف:Font-stretch.png|بديل=تبيين تأثير مختلف القيم لخاصية font-stretch على الخط المستعمل.|بدون|تصغير|تبيين تأثير مختلف القيم لخاصية <code>font-stretch</code> على الخط المستعمل.]] | ||
إن لم يكن للخط نسخ موسعة أو ضيقة، مثل الخط الشهير Time New Roman، فلن يكون للخاصية <code>font-stretch</code> أيّ تأثير مرئي. | إن لم يكن للخط نسخ موسعة أو ضيقة، مثل الخط الشهير Time New Roman، فلن يكون للخاصية <code>font-stretch</code> أيّ تأثير مرئي. | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
== أمثلة == | == أمثلة == | ||
| سطر 74: | سطر 77: | ||
تقبل الخاصية <code>font-stretch</code> إحدى القيم الآتية | تقبل الخاصية <code>font-stretch</code> إحدى القيم الآتية | ||
| − | === | + | === <code>normal</code> === |
تحديد النسخة العادية من الخط. | تحديد النسخة العادية من الخط. | ||
| − | === | + | === <code>semi-condensed</code> أو <code>condensed</code> أو <code>extra-condensed</code> أو <code>ultra-condensed</code> === |
| − | تحديد نسخة أكثر ضيقًا من النسخة العادية، وستؤدي | + | تحديد نسخة أكثر ضيقًا من النسخة العادية، وستؤدي <code>ultra-condensed</code> إلى اختيار أكثر نسخة ضيقة من الخط. |
| − | === | + | === <code>semi-expanded</code> أو <code>expanded</code> أو <code>extra-expanded</code> أو <code>ultra-expanded</code> === |
| − | تحديد نسخة أكثر توسعةً من النسخة العادية، وستؤدي | + | تحديد نسخة أكثر توسعةً من النسخة العادية، وستؤدي <code>ultra-expanded</code> إلى اختيار أكثر نسخة موسعة من الخط. |
=== البنية الرسمية === | === البنية الرسمية === | ||
مراجعة 09:03، 25 يوليو 2018
الخاصية font-stretch في CSS تختار نسخةً ضيقةً (condensed) أو عاديةً (normal) أو موسعةً (expanded) من الخط.
بطاقة الخاصية
| القيمة الابتدائية | normal
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | نعم |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | كما حُدِّدَت. |
/* كلمات محجوزة */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
/* قيم عامة */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;
لا تؤدي هذه الخاصية إلى تغيير أبعاد الخط، وإنما هي طريقةٌ لاختيار أفضل نسخة من الخط إن كان الخط يوفِّر أكثر من نسخة.
إن لم يكن للخط نسخ موسعة أو ضيقة، مثل الخط الشهير Time New Roman، فلن يكون للخاصية font-stretch أيّ تأثير مرئي.
أمثلة
مثال عن استخدام الخاصية font-stretch مع عدِّة قيم:
<div class="ultra stretch">This is text with the font extremely expanded</div>
<div class="stretch">This is text with the font stretched</div>
<div class="normal">This is text without font stretching</div>
<div class="condensed">This is text with the font condensed</div>
<div class="ultra condensed">This is text with the font extremely condensed</div>
شيفرة CSS:
.ultra.stretch { font-stretch: ultra-expanded; }
.stretch { font-stretch: expanded; }
.normal { font-stretch: normal; }
.condensed { font-stretch: condensed; }
.ultra.condensed { font-stretch: ultra-condensed; }
احرص على تجربة المثال السابق مع خطٍ له أكثر من نسخة لكي يكون لهذه الخاصية أثر.
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 48.0 | 9.0 | 9.0 | 35.0 | 11 |
البنية العامة
تقبل الخاصية font-stretch إحدى القيم الآتية
normal
تحديد النسخة العادية من الخط.
semi-condensed أو condensed أو extra-condensed أو ultra-condensed
تحديد نسخة أكثر ضيقًا من النسخة العادية، وستؤدي ultra-condensed إلى اختيار أكثر نسخة ضيقة من الخط.
semi-expanded أو expanded أو extra-expanded أو ultra-expanded
تحديد نسخة أكثر توسعةً من النسخة العادية، وستؤدي ultra-expanded إلى اختيار أكثر نسخة موسعة من الخط.
البنية الرسمية
font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;
مصادر ومواصفات
- مواصفة CSS Fonts Module Level 3.
عُرِّفَت الخاصية font-stretch أوّل مرة في CSS 2 ثم حُذِفَت في CSS 2.1، ثم أضيفت مجددًا في CSS 3.