العودة إلى الدورة

الدرس 26: الطباعة: عائلات الخطوط والبدائل (Fallbacks)

إتقان CSS: من الصفر إلى الاحتراف في 100 درس

26. الطباعة: عائلات الخطوط والبدائل

الطباعة (Typography) ضرورية لسهولة القراءة وجماليات التصميم. تحدد خاصية font-family نوع الخط المستخدم للنص.

تعريف عائلات الخطوط

يمكن أن تكون قيم عائلة الخطوط أسماء خطوط محددة أو أسماء عائلات عامة.

css body { font-family: Arial, Helvetica, sans-serif; }

h1 { font-family: 'Times New Roman', serif; }

نظام البدائل (Fallback System)

من الضروري تقديم قائمة من الخطوط مفصولة بفاصلة. يحاول المتصفح تحميل الخط الأول في القائمة. إذا لم يكن هذا الخط متاحاً على نظام المستخدم، فإنه ينتقل إلى الثاني، وهكذا.

الخط الأخير الحاسم: يجب أن تنتهي القائمة بكلمة محجوزة لعائلة خطوط عامة. يضمن ذلك أنه حتى لو لم يتم تحميل أي خط محدد، يظل النص قابلاً للقراءة.

العائلة العامةالوصف
serifخطوط تحتوي على خطوط صغيرة/زخارف في نهايات الحروف (مثل Times New Roman).
sans-serifخطوط بدون زخارف (مثل Arial, Helvetica). الأفضل للشاشات الرقمية.
monospaceجميع الأحرف لها نفس العرض (مثل Courier). تستخدم للأكواد البرمجية.
cursiveخطوط تشبه الكتابة اليدوية.
fantasyخطوط زخرفية.

اقتباس الخطوط: إذا كان اسم الخط يحتوي على مسافات (مثل 'Times New Roman') ، فيجب إحاطته بعلامات اقتباس (فردية أو مزدوجة).