خاصية font-stretch
آخر تحديث: 2026-09-13
font-stretch خاصية font-stretch
تحدد خاصية font-stretch في CSS نسخةً مُكثّفةً أو ممتدةً من الخط، من ultra-condensed إلى ultra-expanded عبر تسعة مستويات. ولا يظهر تأثيرها إلا إذا كان الخط يوفر فعليًا نسخة عرض مطابقة.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | نعم |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | كلمة مفتاحية | مستويات امتداد الخط |
<percentage> | النوع | نسبة مئوية للامتداد |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-stretch | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： لا تتضمن الخطوط الصينية تقريبًا أي نسخ عرض، لذا تكون الخاصية بلا تأثير فعلي على الصينية وتُستخدم أساسًا مع الطباعة الغربية والخطوط المتغيرة.
❓ الأسئلة الشائعة
Qكيف تختلف خاصية font-stretch عن letter-spacing في CSS؟
Aيغيّر font-stretch نسبة عرض المخطوطات نفسها (condensed/expanded) ويتطلب أن يوفّر الخط نسخ عرض مطابقة أو محاور خط متغيرة؛ أما letter-spacing فلا يضيف سوى مسافة بين الأحرف دون تغيير المخطوطات. استخدم font-stretch لجعل النص أضيق، وletter-spacing لإضافة مساحة.
Qهل لخاصية font-stretch أي تأثير على عرض النص الصيني؟
Aعمليًا لا. تُقدَّم تقريبًا جميع الخطوط الصينية بمجموعة واحدة من المخطوطات بعرض عادي دون نسخ مُكثّفة أو ممتدة، لذا يتجاهل المتصفح الخاصية. وهي مفيدة أساسًا للنصوص الغربية والخطوط المتغيرة.
Qكيف أجعل النص يبدو أضيق باستخدام خاصية font-stretch في CSS؟
Aإذا كان الخط يوفّر نسخ العرض، استخدم font-stretch: condensed. يمكنك أيضًا الضغط عبر transform: scaleX(0.9)، رغم تشوّه المخطوطات. وتقبل الخطوط المتغيرة نسبًا مئوية دقيقة للعرض، مثلًا font-stretch: 75%.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
