خاصية font-variant
آخر تحديث: 2026-09-13
font-variant خاصية font-variant
تطبّق الخاصية CSS font-variant تأثيرات متغيّرات الخط مثل small-caps، التي تعرض الحروف الصغيرة كحرف كبيرة بحجم مُصغّر. والقيمة small-caps هي الميزة الأكثر دعمًا على نطاق واسع.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | نعم |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
font-variant: normal | small-caps;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
normal | small-caps | كلمة مفتاحية | متغيّر الخط (حرف كبيرة صغيرة) |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-variant | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يحافظ small-caps على حجم الحروف الكبيرة الموجودة ويحوّل الحروف الصغيرة فقط إلى حروف كبيرة صغيرة، مما يناسب العناوين بالإنجليزية.
❓ الأسئلة الشائعة
Qهل تعمل القيمة small-caps من font-variant مع النص الصيني؟
Aيعرض small-caps الحروف الصغيرة كحرف كبيرة صغيرة؛ واللغة الصينية لا تعرف مفهوم الحالة (كبيرة/صغيرة)، لذا لا تتأثر الأحرف الصينية (Hanzi)، رغم أن أي حروف لاتينية في الفقرة تتغير. وإذا كان النص كله حروفًا كبيرة أصلًا، فلا يغيّر small-caps الحجم.
Qما الفرق بين font-variant: small-caps وtext-transform: uppercase؟
Aيحوّل uppercase كل حرف إلى حروف كبيرة عادية يتطابق ارتفاعها مع الأرقام؛ بينما يستخدم small-caps رسومًا لحروف كبيرة بحجم مُصغّر تحافظ على الارتفاع النسبي للحروف الصغيرة الأصلية، مما يمنح مظهرًا أكثر أناقة يناسب العناوين والاختصارات بالإنجليزية.
Qماذا يمكن أن تفعل الخاصية المختصرة font-variant في CSS الحديث؟
Aوسّع CSS3 الخاصية font-variant لتصبح اختصارًا (shorthand) يتحكم في الوصلات (font-variant-ligatures) والأشكال العددية (font-variant-numeric) وغيرها. فمثلًا يجعل font-variant-numeric: tabular-nums الأرقام متساوية العرض لمحاذاتها في الجداول وقوائم الأسعار.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
