| الخاصية أو المفهوم | طريقة العمل والتركيب البرمجي | الاستخدام الشائع ونموذج كتابة الكود |
|---|---|---|
| font-family | تحدد نوع وشكل الخط المستخدم للنصوص وتقبل قائمة خطوط احتياطية fallback | تكتب بفصل أسماء الخطوط بفاصلة مثل Cairo ثم Segoe UI وينتهي دائماً بنوع عام مثل sans-serif لحماية التصميم |
| font-size | يتحكم في أبعاد وتكبير النص باستخدام وحدات قياس ثابتة أو مرنة نسبية | يفضل استخدام وحدة rem لبناء نصوص متجاوبة تتغير مرونتها تلقائياً حسب إعدادات جهاز زائر الموقع |
| font-weight | يحدد درجة ثخانة أو نحافة أحرف الخط المقروء في التصميم | يقبل كلمات مثل bold أو قيم رقمية تبدأ من 100 للخط النحيف جداً حتى 900 للخط العريض والأسود الداكن |
| font-style | يتحكم في جعل الخط مائلاً أو يعيده لوضعه الطبيعي الافتراضي المستقیم | يقبل القيمة italic لعمل خطوط مائلة مميزة للاقتباسات أو القيمة normal لإلغاء الميول |
| font-variant | يتيح تحويل الأحرف الإنجليزية الصغيرة إلى أحرف كابيتال لكن بحجم أصغر متناسق | يقبل القيمة الشهيرة small-caps لإعطاء مظهر عناوين كلاسيكي مميز |
| font | يجمع خصائص النمط والوزن والحجم وارتفاع السطر وعائلة الخط كلها في سطر واحد | يكتب بالترتيب التالي italic ثم bold ثم الحجم مع ارتفاع السطر 18px/1.6 ثم اسم الخط المتناسق Cairo |
Typography هي علم وفن ترتيب النص ليكون مقروءاً وجذاباً. خصائص الخطوط الأساسية في CSS:
**font-family:** يحدد نوع الخط. يقبل قائمة من الخطوط كـ fallback. `font-family: 'Cairo', 'Segoe UI', sans-serif;`
**font-size:** حجم الخط. - px: ثابت وواضح - rem: نسبة من html (الأفضل للتجاوب) - em: نسبة من العنصر الأب - %: نسبة مئوية
**font-weight:** سُمك الخط. - thin (100)، extra-light (200)، light (300)، normal/regular (400)، medium (500)، semi-bold (600)، bold (700)، extra-bold (800)، black (900)
**font-style:** italic | oblique | normal
**font-variant:** small-caps وغيرها
**اختصار font:** `font: italic bold 18px/1.6 'Cairo', sans-serif;` (النمط | الوزن | الحجم/ارتفاع السطر | العائلة)
| 1 | body { |
| 2 | font-family: 'Cairo', 'Segoe UI', Arial, sans-serif; |
| 3 | font-size: 16px; |
| 4 | font-weight: 400; |
| 5 | font-style: normal; |
| 6 | } |
| 7 | |
| 8 | h1 { font-size: 2.5rem; font-weight: 700; } |
| 9 | .caption { font-size: 0.875rem; font-style: italic; } |
مثال 1: نظام Typography متسق
| 1 | :root { |
| 2 | --font-sans: 'Cairo', 'Inter', sans-serif; |
| 3 | --text-xs: 0.75rem; |
| 4 | --text-sm: 0.875rem; |
| 5 | --text-base: 1rem; |
| 6 | --text-lg: 1.125rem; |
| 7 | --text-xl: 1.25rem; |
| 8 | --text-2xl: 1.5rem; |
| 9 | --text-3xl: 1.875rem; |
| 10 | --text-4xl: 2.25rem; |
| 11 | } |
| 12 | |
| 13 | body { font-family: var(--font-sans); font-size: var(--text-base); } |
| 14 | h1 { font-size: var(--text-4xl); font-weight: 800; } |
| 15 | h2 { font-size: var(--text-3xl); font-weight: 700; } |
| 16 | p { font-size: var(--text-base); font-weight: 400; } |