الفرق بين المراجعتين ل"CSS/font-stretch"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
| سطر 43: | سطر 43: | ||
== أمثلة == | == أمثلة == | ||
مثال عن استخدام الخاصية <code>font-stretch</code> مع عدِّة قيم:<syntaxhighlight lang="html"> | مثال عن استخدام الخاصية <code>font-stretch</code> مع عدِّة قيم:<syntaxhighlight lang="html"> | ||
| − | <div class="ultra stretch"> | + | <div class="ultra stretch">هذا هو النص مع الخط الموسع للغاية</div> |
| − | <div class="stretch"> | + | <div class="stretch">هذا هو النص مع الخط الممتد</div> |
| − | <div class="normal"> | + | <div class="normal">هذا هو النص دون تمديد الخط</div> |
| − | <div class="condensed"> | + | <div class="condensed">هذا هو النص مع خط مكثف</div> |
| − | <div class="ultra condensed"> | + | <div class="ultra condensed">هذا هو النص مع الخط مكثف للغاية</div> |
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
| سطر 90: | سطر 90: | ||
font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded; | font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | * صفحة الخاصية <code>[[CSS/font|font]]</code> التي تؤدي إلى ضبط قيم الخاصيات الفرعية <code>[[CSS/font-style|font-style]]</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/#propdef-font-stretch CSS Fonts Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-fonts-3/#propdef-font-stretch CSS Fonts Module Level 3]. | ||
المراجعة الحالية بتاريخ 07:18، 26 يوليو 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">هذا هو النص مع الخط الموسع للغاية</div>
<div class="stretch">هذا هو النص مع الخط الممتد</div>
<div class="normal">هذا هو النص دون تمديد الخط</div>
<div class="condensed">هذا هو النص مع خط مكثف</div>
<div class="ultra 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;
انظر أيضًا
- صفحة الخاصية
fontالتي تؤدي إلى ضبط قيم الخاصيات الفرعيةfont-styleوfont-weightوfont-sizeوfont-size-adjustوline-height. - صفحة الخاصية
colorالتي تضبط القيمة اللونية للعناصر.
مصادر ومواصفات
- مواصفة CSS Fonts Module Level 3.
عُرِّفَت الخاصية font-stretch أوّل مرة في CSS 2 ثم حُذِفَت في CSS 2.1، ثم أضيفت مجددًا في CSS 3.