شرح الخطوط في CSS — كيف تختار font-family و font-size بشكل احترافي؟
نوع الخط في CSS يحدد شخصية الموقع: رسمي، عصري، بسيط، أو تقليدي. اختيار الخط المناسب مع حجم مريح يرفع جودة القراءة بشكل كبير.
إذا كنت تبحث عن شرح font-family في CSS أو أفضل font-size في CSS للمواقع أو ما هي fallback fonts، فهذا الدرس يغطيها خطوة بخطوة.
ما هي Font Families في CSS؟
في CSS، الخطوط تنقسم لعائلات عامة. أشهرها:
- Serif: حروف بذيل، طابع رسمي/كلاسيكي.
- Sans-serif: بدون ذيول، أنظف وأسهل للشاشات.
- Monospace: كل حرف بنفس العرض (مناسب للكود).
التعريف البسيط: font-family في CSS تحدد نوع الخط الذي سيظهر به النص.
النتيجة في المتصفح: Serif
Example Text
النتيجة في المتصفح: Sans-serif
Example Text
النتيجة في المتصفح: Monospace
Example Text
font-family في CSS مع Fallback Fonts
أفضل ممارسة هي كتابة أكثر من خط في قائمة احتياطية. إذا لم يتوفر الخط الأول، يستخدم المتصفح الخط التالي.
p {
font-family: "Arial", "Helvetica", sans-serif;
}
ماذا يفعل هذا الكود؟ يطلب Arial أولاً، ثم Helvetica، ثم أي خط sans-serif متاح.
سطر بسطر:
"Arial": الخيار الأول."Helvetica": fallback ثاني.sans-serif: fallback عام إذا لم يتوفر السابق.
النتيجة المتوقعة: شكل خط مستقر نسبياً على مختلف الأجهزة.
خطأ شائع: تحديد خط واحد فقط دون fallback.
النتيجة في المتصفح:
هذا النص يستخدم Arial ثم Helvetica ثم sans-serif.
font-size في CSS (حجم الخط)
خاصية font-size تتحكم في حجم النص.
يمكنك استخدام وحدات مختلفة:
px: قيمة ثابتة (الأكثر وضوحاً للمبتدئ).em: نسبة تعتمد على العنصر الأب.rem: نسبة تعتمد على حجم الخط فيhtml.%: نسبة مئوية.
h1 {
font-size: 32px;
}
p {
font-size: 18px;
}
ماذا يفعل هذا الكود؟ يجعل العنوان أكبر من الفقرة لتحقيق تسلسل بصري واضح.
النتيجة المتوقعة: قراءة أسهل وتدرج منطقي بين العناوين والمحتوى.
خطأ شائع: استخدام أحجام صغيرة جداً مثل 12px للنص الأساسي على الموبايل.
النتيجة في المتصفح:
حجم صغير (12px)
حجم مريح للقراءة (18px)
حجم كبير للعنوان (32px)
متى أستخدم serif ومتى أستخدم sans-serif في CSS؟
- sans-serif: الأفضل غالباً للنصوص الطويلة على الويب.
- serif: مناسب أحياناً للعناوين أو الطابع الرسمي.
- monospace: مثالي لعرض الأكواد والبيانات التقنية.
أفضل ممارسات Typography في CSS
- اجعل حجم النص الأساسي غالباً بين
16pxو20px. - احرص على line-height مناسب مع font-size (مثلاً 1.5 إلى 1.8).
- استخدم fallback fonts دائماً.
- لا تستخدم خطوطاً كثيرة داخل الصفحة الواحدة.
16px.
أخطاء شائعة في font-family و font-size في CSS
١) الاعتماد على خط غير متوفر: بدون fallback مناسب.
٢) أحجام مبالغ فيها: عنوان كبير جداً أو نص صغير جداً.
٣) عدد خطوط كثير: يضعف اتساق التصميم.
الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)
كيف أغير نوع الخط في CSS؟
باستخدام font-family مثل: body { font-family: Arial, sans-serif; }.
ما أفضل font-size للنص الأساسي في CSS؟
غالباً بين 16px و18px حسب نوع الخط والجمهور.
ما الفرق بين serif و sans-serif في CSS؟
serif لها ذيول وتعطي طابعاً تقليدياً، sans-serif أنظف وأشهر للشاشات الحديثة.
لماذا نستخدم fallback fonts في CSS؟
لضمان ظهور خط بديل مناسب إذا لم يكن الخط الأساسي متوفراً على جهاز المستخدم.
هل أستخدم px أم rem في font-size في CSS؟
للمبتدئ px أسهل، وللمشاريع المتقدمة rem أكثر مرونة في التصميم المتجاوب.
font-family لفقرة واحدة بين serif وsans-serif، ثم جرّب أحجاماً مختلفة حتى تصل لأفضل قابلية قراءة.