الخاصية font-stretch
الخاصية 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;
لا تؤدي هذه الخاصية إلى تغيير أبعاد الخط، وإنما هي طريقةٌ لاختيار أفضل نسخة من الخط إن كان الخط يوفِّر أكثر من نسخة.
font-stretch على الخط المستعمل.إن لم يكن للخط نسخ موسعة أو ضيقة، مثل الخط الشهير 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.