خصائص الخطوط وأساسيات الطباعة

مقدمة في أنماط الخطوط في CSS

يعد فن الطباعة والخطوط من أهم جوانب تصميم الويب. الطريقة التي يبدو بها النص ويُقرأ يمكن أن تصنع تجربة المستخدم أو تفسدها على موقعك. الطباعة الجيدة تحسّن قابلية القراءة، وتؤسس تسلسلاً بصرياً واضحاً، وتنقل شخصية الموقع، وتبقي الزوار متفاعلين. يوفر CSS مجموعة غنية من خصائص الخطوط والنصوص التي تمنحك تحكماً دقيقاً في كل جانب من جوانب عرض النص في المتصفح.

في هذا الدرس، سنغطي خصائص الخطوط الأساسية في CSS بعمق -- من اختيار عائلات الخطوط وتحديد الأحجام إلى التحكم في السمك والنمط والتباعد وغير ذلك. بنهاية الدرس، ستملك فهماً شاملاً لكيفية تنسيق النصوص بشكل احترافي وإنشاء أنظمة طباعية تعمل عبر المتصفحات والأجهزة المختلفة.

خاصية font-family

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

عائلات الخطوط العامة

يحدد CSS خمس عائلات خطوط عامة. هذه ليست خطوطاً محددة بل هي فئات يربطها المتصفح بخط افتراضي مثبت. يجب أن تنهي مكدس الخطوط دائماً بواحدة منها كبديل نهائي:

• serif -- خطوط ذات زوائد زخرفية صغيرة (حروف ذيلية) عند أطراف الحروف. أمثلة: Times New Roman وGeorgia. تُعتبر أكثر تقليدية وتُستخدم غالباً لنص المتن في الطباعة والسياقات الرسمية.
• sans-serif -- خطوط بدون زوائد، مما يمنحها مظهراً أنظف وأكثر حداثة. أمثلة: Arial وHelvetica وVerdana. هذه هي الخيار الأكثر شيوعاً لنصوص الويب لأنها تُعرض بوضوح على الشاشات.
• monospace -- كل حرف يشغل نفس المساحة الأفقية. أمثلة: Courier New وConsolas. هذه ضرورية لعرض الأكواد والمخرجات الطرفية وأي سياق يهم فيه محاذاة الأحرف.
• cursive -- خطوط تحاكي الكتابة اليدوية بحروف متصلة أو انسيابية. أمثلة: Comic Sans MS وBrush Script. استخدمها باعتدال ولا تستخدمها أبداً لنص المتن -- فهي صعبة القراءة بالأحجام الصغيرة.
• fantasy -- خطوط زخرفية وعرضية لا تنتمي للفئات الأخرى. أمثلة: Impact وPapyrus. تختلف بشكل كبير بين الأنظمة وهي غير موثوقة للعرض المتسق عبر المنصات.

/* كل فقرة تستخدم عائلة عامة مختلفة */
.serif-text {
    font-family: serif;
}

.sans-text {
    font-family: sans-serif;
}

.mono-text {
    font-family: monospace;
}

.cursive-text {
    font-family: cursive;
}

.fantasy-text {
    font-family: fantasy;
}

مكدسات الخطوط والبدائل الاحتياطية

مكدس الخطوط هو قائمة مفصولة بفواصل من أسماء الخطوط في خاصية font-family. يجرب المتصفح كل خط من اليسار إلى اليمين ويستخدم أول خط متاح. إذا احتوى اسم الخط على مسافات، يجب وضعه بين علامتي اقتباس. يجب أن يكون آخر خط في المكدس دائماً اسم عائلة عامة.

/* مكدس sans-serif حديث */
body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* مكدس serif كلاسيكي */
.article-body {
    font-family: Georgia, "Times New Roman", Times, serif;
}

/* مكدس monospace للأكواد */
code, pre {
    font-family: "Fira Code", "Source Code Pro", Consolas, "Courier New", monospace;
}

/* مكدس خطوط النظام (يستخدم خط واجهة نظام التشغيل الافتراضي) */
.system-ui {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
}

مكدسات خطوط النظام

قدم CSS الحديث الكلمة المفتاحية system-ui، التي تتحول تلقائياً إلى خط واجهة المستخدم الافتراضي لنظام التشغيل. هذا تحول كبير في الأداء لأنه لا يحتاج إلى تنزيل أي خط ويب، ويبدو النص طبيعياً لجهاز المستخدم.

إليك مكدس خطوط النظام الكامل الذي تستخدمه العديد من المواقع الكبرى بما فيها GitHub:

body {
    font-family:
        -apple-system,        /* Safari على macOS وiOS */
        BlinkMacSystemFont,   /* Chrome على macOS */
        "Segoe UI",           /* Windows */
        "Noto Sans",          /* Linux */
        Roboto,               /* Android */
        "Helvetica Neue",     /* macOS الأقدم */
        Arial,                /* بديل احتياطي */
        sans-serif,           /* بديل عام */
        "Apple Color Emoji",  /* إيموجي على أجهزة Apple */
        "Segoe UI Emoji",     /* إيموجي على Windows */
        "Noto Color Emoji";   /* إيموجي على Linux/Android */
}

خاصية font-size

تتحكم خاصية font-size في حجم ظهور النص. يوفر CSS العديد من الوحدات المختلفة لتحديد حجم النص، وفهم متى تستخدم كل وحدة أمر ضروري لبناء مواقع متجاوبة وسهلة الوصول.

الوحدات المطلقة

• px (بكسل) -- وحدة ثابتة لا تتغير بناءً على العناصر الأم. 16px هو الحجم الافتراضي للمتصفح. قيم البكسل دقيقة ومتوقعة لكنها لا تحترم إعدادات حجم خط المتصفح الخاصة بالمستخدم، مما قد يكون مشكلة في إمكانية الوصول.
• pt (نقاط) -- وحدة طباعية (1pt = 1/72 بوصة). تجنب استخدام النقاط في تصميم الويب؛ فهي مخصصة لأوراق أنماط الطباعة.

الوحدات النسبية

• em -- نسبية إلى حجم خط العنصر الأم. إذا كان الأم 16px، فإن 1.5em = 24px. وحدة em تتراكم -- إذا حددت عناصر متداخلة كل منها font-size بوحدة em، تتضاعف الأحجام، مما قد يؤدي إلى نص كبير أو صغير بشكل غير متوقع.
• rem (جذر em) -- نسبية إلى حجم خط العنصر الجذر (<html>). على عكس em، لا تتراكم rem لأنها تشير دائماً إلى نفس القيمة الأساسية. هذا يجعل rem الوحدة المفضلة لأحجام الخطوط في CSS الحديث.
• % -- نسبة مئوية من حجم خط العنصر الأم. 100% تساوي حجم خط الأم. مثل em، تتراكم النسب المئوية عند التداخل.
• vw (عرض نافذة العرض) -- 1vw يساوي 1% من عرض نافذة العرض. هذا ينشئ نصاً يتغير مع حجم نافذة المتصفح. مفيد للعناوين الرئيسية لكنه خطير لنص المتن لأنه قد يصبح غير قابل للقراءة على الشاشات الصغيرة جداً أو الكبيرة جداً.

القيم الكلمات المفتاحية

يوفر CSS أيضاً قيم كلمات مفتاحية لـ font-size: xx-small وx-small وsmall وmedium وlarge وx-large وxx-large. الكلمة المفتاحية medium تساوي الافتراضي (عادةً 16px). يمكنك أيضاً استخدام smaller وlarger وهي نسبية إلى حجم خط الأم.

/* تحجيم مطلق بالبكسل */
h1 {
    font-size: 32px;
}

/* تحجيم نسبي بـ rem (موصى به) */
h2 {
    font-size: 1.75rem;  /* 28px إذا كان الجذر 16px */
}

/* تحجيم نسبي بـ em */
.intro {
    font-size: 1.25em;  /* 125% من الأم */
}

/* تحجيم بالنسبة المئوية */
small {
    font-size: 80%;  /* 80% من الأم */
}

/* تحجيم بناءً على نافذة العرض (استخدم بحذر) */
.hero-title {
    font-size: 5vw;
}

/* تحجيم متجاوب محدد النطاق (أفضل ما في العالمين) */
.responsive-heading {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

خاصية font-weight

تتحكم خاصية font-weight في سمك (غامقية) النص. يمكنك استخدام قيم كلمات مفتاحية أو قيم رقمية من 100 إلى 900.

القيم الكلمات المفتاحية

• normal -- يعادل 400. هذا هو السمك الافتراضي لمعظم النصوص.
• bold -- يعادل 700. هذا هو السمك الافتراضي للعناوين وعناصر <strong>.
• lighter -- درجة سمك واحدة أخف من العنصر الأم. النتيجة الدقيقة تعتمد على أسماك الخط المتاحة.
• bolder -- درجة سمك واحدة أثقل من العنصر الأم.

القيم الرقمية

تتراوح الأسماك الرقمية من 100 (الأنحف) إلى 900 (الأسمك) بزيادات 100. التعيينات الشائعة هي:

• 100 -- رفيع / شعري
• 200 -- خفيف جداً / فائق الخفة
• 300 -- خفيف
• 400 -- عادي / طبيعي
• 500 -- متوسط
• 600 -- شبه غامق / نصف غامق
• 700 -- غامق
• 800 -- غامق جداً / فائق الغمق
• 900 -- أسود / ثقيل

/* القيم الكلمات المفتاحية */
.normal-text {
    font-weight: normal;    /* 400 */
}
.bold-text {
    font-weight: bold;      /* 700 */
}

/* القيم الرقمية */
.thin {
    font-weight: 100;
}
.light {
    font-weight: 300;
}
.medium {
    font-weight: 500;
}
.semi-bold {
    font-weight: 600;
}
.extra-bold {
    font-weight: 800;
}
.black {
    font-weight: 900;
}

/* القيم النسبية */
.lighter-than-parent {
    font-weight: lighter;
}
.bolder-than-parent {
    font-weight: bolder;
}

خاصية font-style

تتحكم خاصية font-style فيما إذا كان النص يُعرض بنمط عادي أو مائل أو منحرف.

• normal -- النمط المستقيم الافتراضي.
• italic -- يستخدم النسخة المائلة من الخط، والتي عادةً ما تكون نسخة مصممة خصيصاً بأشكال حروف مختلفة (مثلاً، حرف "a" بطابق واحد بدلاً من طابقين).
• oblique -- يميل الخط العادي بزاوية. على عكس italic، لا يستخدم oblique أشكال حروف معاد تصميمها؛ بل يميل الأحرف الموجودة فقط. يمكنك اختيارياً تحديد زاوية: oblique 14deg.

.normal {
    font-style: normal;
}

.italic {
    font-style: italic;
}

.oblique {
    font-style: oblique;
}

/* منحرف بزاوية محددة (CSS Fonts Level 4) */
.custom-slant {
    font-style: oblique 12deg;
}

/* حالة استخدام شائعة: تنسيق اقتباس */
blockquote {
    font-style: italic;
    font-weight: 300;
    border-left: 4px solid #ccc;
    padding-left: 1rem;
}

خاصية font-variant

توفر خاصية font-variant وصولاً إلى الحروف البديلة والميزات الطباعية. القيمة الأكثر استخداماً هي small-caps، التي تعرض الأحرف الصغيرة كنسخ أصغر من الأحرف الكبيرة.

/* أحرف كبيرة صغيرة أساسية */
.small-caps {
    font-variant: small-caps;
}

/* كل الأحرف كبيرة صغيرة -- حتى الأحرف الكبيرة تصبح كبيرة صغيرة */
.all-small-caps {
    font-variant-caps: all-small-caps;
}

/* أرقام جدولية للأعمدة المحاذاة */
.data-table td {
    font-variant-numeric: tabular-nums;
}

/* أرقام بالنمط القديم (صغيرة) لنص المتن */
.body-text {
    font-variant-numeric: oldstyle-nums;
}

/* التحكم في الأحرف المتصلة */
.fancy-text {
    font-variant-ligatures: common-ligatures discretionary-ligatures;
}

/* دمج متغيرات متعددة */
.stylish-heading {
    font-variant: small-caps;
    font-variant-numeric: oldstyle-nums;
    letter-spacing: 0.05em;
}

خاصية font المختصرة

تتيح خاصية font المختصرة تعيين خصائص خطوط متعددة في تصريح واحد. الصيغة هي:

font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;

قيم font-size وfont-family مطلوبة؛ وجميع القيم الأخرى اختيارية. إذا حذفت أي قيمة اختيارية، تعود إلى قيمتها الافتراضية. سلوك إعادة التعيين هذا مهم لفهمه -- ستتجاوز الخاصية المختصرة أي خصائص فردية حددتها سابقاً.

/* المختصرة الكاملة */
.complete {
    font: italic small-caps bold 1.2rem/1.6 Georgia, serif;
}

/* المختصرة الدنيا (القيم المطلوبة فقط) */
.minimal {
    font: 16px Arial, sans-serif;
}

/* مع ارتفاع السطر */
.with-line-height {
    font: 1rem/1.5 "Segoe UI", sans-serif;
}

/* كلمات خط النظام المفتاحية */
.system-caption {
    font: caption;   /* يستخدم خط تسميات نظام التشغيل */
}
.system-menu {
    font: menu;      /* يستخدم خط قائمة نظام التشغيل */
}

/* تحذير: المختصرة تعيد تعيين القيم المحذوفة */
.danger {
    font-weight: 700;
    font-style: italic;
    font: 16px Arial, sans-serif;
    /* font-weight الآن 400 (عادي) و
       font-style الآن عادي لأن
       المختصرة أعادت تعيينهما! */
}

خاصية line-height

تتحكم خاصية line-height في التباعد العمودي بين سطور النص. وهي من أهم الخصائص لقابلية القراءة. يحدد ارتفاع السطر الارتفاع الكلي لصندوق كل سطر، ويتم توزيع المساحة بين النص وحواف صندوق السطر بالتساوي فوق وتحت النص.

أنواع القيم

• رقم بدون وحدة (موصى به) -- مضاعف لحجم خط العنصر. مثلاً، line-height: 1.5 على نص بـ font-size: 16px ينتج ارتفاع سطر 24px. القيم بدون وحدة تُورث كمضاعف، لذا ستحسب العناصر الأبناء ارتفاع سطرها الخاص بناءً على حجم خطها الخاص.
• قيم الطول (px, em, rem) -- ارتفاع سطر ثابت أو نسبي. عند استخدام em، انتبه أن القيمة المحسوبة تُورث، وليس المضاعف. هذا يعني أن العناصر الأبناء بأحجام خط مختلفة قد يكون لها ارتفاعات سطر غير مناسبة.
• نسبة مئوية -- مشابهة لـ em؛ القيمة المحسوبة تُورث بدلاً من النسبة المئوية نفسها.
• normal -- الافتراضي للمتصفح، عادةً حوالي 1.2. هذا غالباً ما يكون ضيقاً جداً لنص المتن.

/* قيمة بدون وحدة (موصى به) */
body {
    font-size: 16px;
    line-height: 1.6;  /* 25.6px -- رائع لنص المتن */
}

/* لماذا بدون وحدة أفضل: */
.parent-em {
    font-size: 16px;
    line-height: 1.5em;  /* يُحسب إلى 24px */
}
.child-em {
    font-size: 24px;
    /* يرث 24px (القيمة المحسوبة)، وليس 1.5em */
    /* لذا ارتفاع السطر 24px لنص 24px = مزدحم! */
}

.parent-unitless {
    font-size: 16px;
    line-height: 1.5;  /* المضاعف يُورث */
}
.child-unitless {
    font-size: 24px;
    /* يرث المضاعف 1.5 */
    /* لذا ارتفاع السطر 24px × 1.5 = 36px -- تباعد مناسب! */
}

/* السياقات المختلفة تحتاج ارتفاعات سطر مختلفة */
h1 {
    line-height: 1.2;  /* أضيق للعناوين الكبيرة */
}
p {
    line-height: 1.5;  /* مريح لنص المتن */
}
.small-print {
    line-height: 1.7;  /* تباعد أكثر للنص الصغير */
}

خاصية letter-spacing

تضبط خاصية letter-spacing المسافة الأفقية بين الأحرف الفردية (المعروفة أيضاً بالتتبع في الطباعة). القيم الإيجابية تزيد التباعد، والقيم السلبية تقلله.

/* زيادة التباعد للعناوين بالأحرف الكبيرة */
.uppercase-heading {
    text-transform: uppercase;
    letter-spacing: 0.1em;  /* 10% من حجم الخط */
}

/* تتبع طفيف لقابلية القراءة */
.body-text {
    letter-spacing: 0.02em;
}

/* تتبع ضيق للنص العرضي الكبير */
.display-text {
    font-size: 4rem;
    letter-spacing: -0.02em;
}

/* تباعد ثابت بالبكسل */
.fixed-spacing {
    letter-spacing: 2px;
}

/* تباعد طبيعي (إعادة تعيين) */
.normal-spacing {
    letter-spacing: normal;
}

خاصية word-spacing

تضبط خاصية word-spacing المسافة بين الكلمات. مثل letter-spacing، القيم الإيجابية تضيف مسافة والقيم السلبية تقللها. هذه الخاصية أقل استخداماً لكنها مفيدة لضبط النص المضبوط أو إنشاء تأثيرات طباعية محددة.

/* زيادة تباعد الكلمات */
.wide-words {
    word-spacing: 0.2em;
}

/* تقليل تباعد الكلمات */
.tight-words {
    word-spacing: -0.1em;
}

/* قيمة ثابتة بالبكسل */
.spaced-words {
    word-spacing: 4px;
}

/* مفيد للنص المضبوط لتقليل تأثير النهر */
.justified-text {
    text-align: justify;
    word-spacing: -0.05em;
    hyphens: auto;
}

خاصية font-display

تتحكم خاصية font-display في كيفية عرض خط الويب أثناء تحميله. تُحدد هذه الخاصية داخل قاعدة @font-face (التي سنغطيها بالتفصيل في الدرس التالي)، لكن فهمها الآن مهم لأنها تؤثر مباشرة على الطباعة وتجربة المستخدم.

• auto -- يقرر المتصفح الاستراتيجية (عادةً مشابهة لـ block).
• block -- يخفي النص لمدة تصل إلى 3 ثوانٍ أثناء تحميل الخط (ينشئ FOIT -- وميض النص غير المرئي).
• swap -- يعرض النص البديل فوراً، ثم يستبدله بخط الويب عند تحميله (ينشئ FOUT -- وميض النص غير المنسق). الأفضل للنص المهم الذي يجب أن يكون قابلاً للقراءة فوراً.
• fallback -- حل وسط بين block وswap. يمنح الخط فترة حظر قصيرة جداً (حوالي 100 مللي ثانية)، ثم يعرض البديل. إذا تحمل الخط خلال حوالي 3 ثوانٍ، يُستبدل؛ وإلا يُستخدم البديل لبقية عمر الصفحة.
• optional -- الخيار الأكثر ملاءمة للأداء. يمنح فترة حظر قصيرة جداً فقط. قد يقرر المتصفح عدم استخدام خط الويب إطلاقاً إذا لم يتحمل بسرعة كافية. رائع للاتصالات البطيئة.

الجمع بين كل شيء: نظام طباعي

المواقع الاحترافية لا تعين خصائص الخطوط عشوائياً على العناصر الفردية. بدلاً من ذلك، تؤسس مقياساً طباعياً -- مجموعة متسقة من أحجام الخطوط والأسماك وارتفاعات السطور التي تخلق تناغماً بصرياً عبر الموقع بأكمله.

/* إعدادات الجذر */
:root {
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --font-serif: "Merriweather", Georgia, serif;
    --font-mono: "Fira Code", "Source Code Pro", monospace;

    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
}

/* الطباعة الأساسية */
html {
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* العناوين */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

/* الأكواد */
code, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* فئات المساعدة */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }