شرح صفوف ومحتوى الفقرة
لا يمكنك الجزم مسبقاً بالخطوط المثبتة على حاسوب أو هاتف كل زائر؛ ولذلك توفر CSS كلمات محجوزة تُعرف بـ العائلات الخطية العامة توجه المتصفح لاختيار أنسب خط متاح من نفس الفئة على نظام التشغيل:
| العائلة العامة | السمة البصرية للحروف | الاستخدام العملي الأنسب |
|---|---|---|
sans-serif | أطراف حروف ملساء مستقيمة خالية من الزوائد | واجهات التطبيقات والمقالات الرقمية وشاشات الهاتف |
serif | زوائد صغيرة (أقدام زخرفية) في نهايات الحروف | المطبوعات الكلاسيكية والمجلات والعناوين الرسمية |
monospace | جميع الحروف والمسافات تشغل العرض الأفقي ذاته | عرض الشيفرات البرمجية والمعرفات والأرقام الجدولية |
cursive | ضربات متصلة تحاكي خط اليد والرقعة الفنية | العبارات الترحيبية القصيرة والبطاقات الزخرفية |
system-ui | يعتمد خط واجهة نظام التشغيل الأصلي للزائر | تطبيقات الويب فائقة السرعة دون انتظار تحميل ملفات |
CSS
.ui-text {
font-family: system-ui, sans-serif;
}
.book-quote {
font-family: serif;
}
.code-sample {
font-family: monospace;
}