في هذا الدرس 5تصفّح المواضيع
تمنح الخطوط لأي موقع شخصيته البصرية الفورية ومستوى راحته القرائية؛ فالمجلات الأدبية تكتسب وقاراً بالخطوط المزيلة كلاسيكياً، بينما تتطلب لوحات التحكم الرقمية خطوطاً هندسية صافية الحواف، وتستلزم محررات الشيفرات محارف متساوية العرض تماماً. تتولى خاصية font-family في لغة CSS تحديد الخط أو قائمة الخطوط المرتبة بالأولوية لعرض النصوص.
ولأن خاصية font-family من الخصائص الموروثة تلقائياً، يكفي تعريفها مرة واحدة داخل محدد body لترثها جميع العناوين والفقرات والروابط وعناصر القوائم في الصفحة دون الحاجة لتكرارها على كل عنصر.
لا يمكنك الجزم مسبقاً بالخطوط المثبتة على حاسوب أو هاتف كل زائر؛ ولذلك توفر CSS كلمات محجوزة تُعرف بـ العائلات الخطية العامة توجه المتصفح لاختيار أنسب خط متاح من نفس الفئة على نظام التشغيل:
| العائلة العامة | السمة البصرية للحروف | الاستخدام العملي الأنسب |
|---|---|---|
sans-serif | أطراف حروف ملساء مستقيمة خالية من الزوائد | واجهات التطبيقات والمقالات الرقمية وشاشات الهاتف |
serif | زوائد صغيرة (أقدام زخرفية) في نهايات الحروف | المطبوعات الكلاسيكية والمجلات والعناوين الرسمية |
monospace | جميع الحروف والمسافات تشغل العرض الأفقي ذاته | عرض الشيفرات البرمجية والمعرفات والأرقام الجدولية |
cursive | ضربات متصلة تحاكي خط اليد والرقعة الفنية | العبارات الترحيبية القصيرة والبطاقات الزخرفية |
system-ui | يعتمد خط واجهة نظام التشغيل الأصلي للزائر | تطبيقات الويب فائقة السرعة دون انتظار تحميل ملفات |
.ui-text {
font-family: system-ui, sans-serif;
}
.book-quote {
font-family: serif;
}
.code-sample {
font-family: monospace;
}يحمي الالتزام بقواعد علامات التنصيص داخل font-family ملفاتك من أخطاء خفية تعطّل الخطوط البديلة:
- ضع علامتي تنصيص حول الأسماء المركبة: إذا تألف اسم الخط من كلمتين أو أكثر تفصل بينهما مسافات أو أرقام مثل
"Times New Roman"أو"Segoe UI"أو"Courier New"، فأحطه بعلامتي تنصيص مزدوجتين أو مفردتين ليقرأه المحلل كاسم خط واحد متكامل. - إياك وتنصيص العائلات العامة: الكلمات العامة مثل
sans-serifوserifوmonospaceهي كلمات مفتاحية محجوزة في اللغة وليست أسماء ملفات؛ ووضعها بين علامتي تنصيص مثل"sans-serif"يخدع المتصفح فيبحث عن ملف خط اسمه الحرفي sans-serif فتفشل شبكة الأمان تماماً!
.formal-title {
font-family: "Times New Roman", serif;
}
.terminal-row {
font-family: "Courier New", monospace;
}تُعرف القائمة المتدرجة المفصولة بفواصل باسم سلسلة الخطوط البديلة (Font Stack)؛ وتبدأ بالخط المفضل لديك، تليه الخطوط الآمنة للويب المثبتة مسبقاً على معظم أنظمة ويندوز وماك مثل Arial و Tahoma و Verdana و Georgia، وتُختتم وجوباً بعائلة عامة.
بدّل بين الحالات الثلاث في المختبر التفاعلي التالي لتتبع كيف يختار المتصفح الخط الفائز من السلسلة بحسب جهاز الزائر:
في المواقع ثنائية اللغة التي تعتمد على خطوط النظام المحلية، تحتاج سلسلة الخطوط إلى عناية تضمن تناسق الحروف العربية والإنجليزية معاً؛ فالخطوط اللاتينية الكلاسيكية مثل "Times New Roman" غالباً ما تسقط في العربية إلى خطوط تقليدية دقيقة ترهق العين على الشاشات الصغيرة، بينما تمنحك السلسلة الحديثة system-ui, "Segoe UI", Tahoma, Arial, sans-serif وضوحاً ممتازاً في اللغتين معاً.
body {
font-family: system-ui, "Segoe UI",
Tahoma, Arial, sans-serif;
font-size: 1.125rem;
line-height: 1.8;
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس توظيف خاصية font-family ووراثتها الشاملة، وميزت بين العائلات العامة الخمس وعلى رأسها sans-serif و monospace و system-ui، وعرفت قاعدة تنصيص الأسماء المركبة مقابل إبقاء العائلات العامة بلا تنصيص لبناء سلاسل بديلة متينة. الخطوة التالية: انتقل الآن إلى درس «أشكال الخطوط في لغة CSS» لضبط إمالة الحروف وأوزان السماكة والأحرف المصغرة باحترافية.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Font Stack سلسلة الخطوط البديلة
- قائمة خطوط مفصولة بفواصل داخل خاصية font-family يفحصها المتصفح بالترتيب وتنتهي بعائلة عامة لضمان سلامة العرض.
- للمراجعة
- 02 Generic Font Family العائلة الخطية العامة
- كلمة مفتاحية غير منصوصة في CSS مثل sans-serif أو serif أو monospace توجه المتصفح لاختيار خط متاح من نفس الفئة.
- للمراجعة
- 03 Web-Safe Font الخط الآمن للويب
- خط مثبت مسبقاً على أغلب أنظمة التشغيل العالمية مثل Arial و Tahoma و Georgia فيعمل فوراً دون تحميل خارجي.
- للمراجعة
- 04 Per-Glyph Fallback التعويض على مستوى الحرف
- قدرة محرك المتصفح على تعويض الحروف الناقصة من الخط التالي في السلسلة تلقائياً إذا خلا الخط الأول من دعم لغة معينة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 UI UI
- User Interface
- واجهة المستخدم المرئية التي تشمل النصوص والعناصر التفاعلية المعروضة أمام الزائر.
- للمراجعة
- 02 OS OS
- Operating System
- نظام التشغيل الذي يدير مكتبة الخطوط المحلية المثبتة على الجهاز والتي تستدعيها قيمة system-ui.
- للمراجعة
- 03 CSS CSS
- Cascading Style Sheets
- لغة الأنماط المتتالية المسؤولة عن توريث الخطوط وتنسيق سلاسل البدائل في صفحات الويب.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
في محرر التجريب، اضبط عنوان مقال بسلسلة تبدأ بالخط المنصوص "Times New Roman" ثم Georgia وتنتهي بالكلمة serif دون تنصيص.
-
طبّق عائلة monospace على فقرة كود برمجي ثم تحقق من اسم ملف الخط الفائز داخل قسم Rendered Fonts في تبويب Computed.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.