عرض مصدر CSS/font-stretch

<noinclude>{{DISPLAYTITLE:الخاصية <code>font-stretch</code>}}</noinclude>
الخاصية <code>font-stretch</code> في CSS تختار نسخةً ضيقةً (condensed) أو عاديةً (normal) أو موسعةً (expanded) من الخط.<syntaxhighlight lang="css">
/* كلمات محجوزة */
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;
</syntaxhighlight>لا تؤدي هذه الخاصية إلى تغيير أبعاد الخط، وإنما هي طريقةٌ لاختيار أفضل نسخة من الخط إن كان الخط يوفِّر أكثر من نسخة.
[[ملف:Font-stretch.png|بديل=تبيين تأثير مختلف القيم لخاصية font-stretch على الخط المستعمل.|بدون|تصغير|تبيين تأثير مختلف القيم لخاصية <code>font-stretch</code> على الخط المستعمل.]]
إن لم يكن للخط نسخ موسعة أو ضيقة، مثل الخط الشهير Time New Roman، فلن يكون للخاصية <code>font-stretch</code> أيّ تأثير مرئي.

{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>normal</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|نعم
|-
!قابلة للتحريك
|نعم
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.
|}

== أمثلة ==
مثال عن استخدام الخاصية <code>font-stretch</code> مع عدِّة قيم:<syntaxhighlight lang="html">
<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>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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; }

</syntaxhighlight>احرص على تجربة المثال السابق مع خطٍ له أكثر من نسخة لكي يكون لهذه الخاصية أثر.
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|48.0
|9.0
|9.0
|35.0
|11
|}

== البنية العامة ==
تقبل الخاصية <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>  إلى اختيار أكثر نسخة موسعة من الخط.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;
</syntaxhighlight>
== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-fonts-3/#propdef-font-stretch CSS Fonts Module Level 3].
عُرِّفَت الخاصية <code>font-stretch</code> أوّل مرة في CSS 2 ثم حُذِفَت في CSS 2.1، ثم أضيفت مجددًا في CSS 3.
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Font|{{SUBPAGENAME}}]]