النص وأسلوب الخط

The CSS Podcast - 036: Text & Typography

النص هو أحد العناصر الأساسية للويب.

عند إنشاء موقع إلكتروني، ليس من الضروري تصميم النص، إذ يتضمّن HTML بعض الأنماط التلقائية المعقولة.

ومع ذلك، من المرجح أن يشكّل النص غالبية مساحة موقعك الإلكتروني، لذا من المفيد إضافة بعض الأنماط لتحسينه. يمكنك تحسين تجربة القراءة للمستخدمين بشكل كبير من خلال تغيير بعض السمات الأساسية.

في هذه الوحدة، سنبدأ بقاعدة @font-face التي تتيح لك استيراد الخطوط المخصّصة إلى صفحات الويب. يضمن لك ذلك الحصول على الطباعة المميّزة التي تحتاج إليها، بغض النظر عن الخطوط التي ثبَّتها المستخدم.

بعد ذلك، سنتناول خصائص الخطوط الأساسية في CSS، بما في ذلك font-family وfont-style وfont-weight وfont-size. تُعدّ هذه الأساسيات خطوة أولى مهمة لتعديل النص من حيث الأسلوب وسهولة القراءة.

وسنتطرق أيضًا إلى الخصائص المخصصة للفقرات مثل text-indent وword-spacing، قبل اختتامها بموضوعات متقدمة مثل الخطوط المتغيرة والعناصر الزائفة، التي تزيد من تحسين عناصر التحكم في الطباعة.

سيتم تقديم أمثلة ونصائح عملية على مدار الدورة لتعزيز فهمك لأساليب CSS هذه وتطبيقها.

قاعدة @font-face

تُعدّ قاعدة at-rule في CSS‏ @font-face مُهمّة في تصميم الويب، إذ تتيح لك تحديد واستخدام خطوط مخصّصة لعرض النص. يكمن جمال @font-face في تنوعه: فهو يتيح لك الحصول على الخطوط من خادم عن بُعد أو من خط مثبَّت على جهاز المستخدم.

البنية

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

الواصِفات

ascent-override
تخصيص مقياس الصعود، الذي يؤثر في المساحة فوق خط الأساس
descent-override
يضبط مقياس الانحدار، ما يؤثّر في المساحة أسفل خط الأساس.
font-display
تحكّم هذه السمة في سلوك عرض الخطّ استنادًا إلى حالة تنزيله.
font-family
يسمي الخط المستخدَم في السمات ذات الصلة بالخط.
font-stretch
تُستخدَم لضبط التسوية الأفقية المقبولة، والتي يتم تحديدها كقيمة أو نطاق واحد.
font-style
يحدِّد نمط الخط، مع السماح بنطاقات الزاوية للأنماط المائلة.
font-weight
يحدِّد هذا الخيار كثافة الخط أو نطاق القيم التقديرية المتاحة.
font-feature-settings
يتيح الوصول إلى ميزات خطوط OpenType.
font-variation-settings
توفير إمكانية التحكّم الدقيق في إعدادات الخطوط المتغيّرة
line-gap-override
تلغى هذه السمة الفجوة التلقائية بين السطور في الخط.
size-adjust
يُطبِّق عامل قياس على مخطّط الخط ومقاييسه.
src
تحدد مصدر الخط، سواء كان محليًا أو عن بُعد. هذا الإجراء مطلوب لقاعدة @font-face. إنّ الجمع بين url() وlocal() في src هو استراتيجية شائعة تستخدم خطًا محليًا في حال توفّره، ويتم الرجوع إلى ملف خط بعيد كإجراء احتياطي. تعطي المتصفّحات الأولوية للموارد بناءً على ترتيب البيان، لذلك يجب أن يسبق local() عادةً url().
unicode-range
تُحدّد الأحرف التي يجب استخدام هذا الخط معها.

الوصف

تُطلق خدمة @font-face المصمّمين من قيود الخطوط "المتوافقة مع الويب" من خلال السماح لهم باستخدام أسلوب خط مخصّص. توفّر وظيفة local() إمكانية البحث عن خط على جهاز المستخدم، ما يقدّم تجربة سلسة لا تعتمد بالضرورة على اتصال بالإنترنت.

أنواع MIME للخطوط

التنسيق نوع MIME
TrueType font/ttf
OpenType font/otf
تنسيق الخط المفتوح على الويب font/woff
تنسيق الخط المفتوح على الويب 2 font/woff2

الفرق بين @font-face وfont-family

في CSS، غالبًا ما يتم الخلط بين @font-face وfont-family، ولكنهما يخدمان أغراضًا مختلفة.

كما ناقشنا سابقًا، @font-face هي قاعدة تُستخدَم لتحديد أي خطوط مخصّصة تريد استخدامها في تطبيق الويب. وتُعلم المتصفّح بمكان تنزيل الخط، وكيفية عرضه أثناء التحميل (باستخدام السمة font-display)، وتحديد المجموعة الفرعية من الأحرف التي يجب تنزيلها (باستخدام السمة unicode-range).

في المقابل، font-family هي سمة CSS تُستخدَم ضمن قاعدة CSS لتحديد خط معيّن أو قائمة بالخطوط لعنصر معيّن. يمكن أن تكون الخطوط المدرَجة ضمن font-family خطوطًا متوافقة مع الويب أو خطوط نظام أو خطوط مخصّصة تم تحديدها باستخدام @font-face.

باختصار، @font-face تُعلِن عن خط وتمنحه اسمًا، وfont-family تطبِّق هذا الخط المعلَن على عناصر HTML.

في ما يلي مثال على استخدام كليهما:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

في هذا المثال، يحدِّد @font-face "CustomFont" ويُعلم المتصفّح بمكان العثور عليه. تطبّق السمة font-family هذه القيمة بعد ذلك على عنصر النص، مع استخدام Arial كخيار احتياطي في حال عدم توفّر CustomFont.

تغيير نوع الخط

دعم المتصفح

  • Chrome: 1.
  • Edge: 12.
  • فَيَرفُكس: 1-
  • Safari: 1.

المصدر

استخدِم font-family لتغيير خط النص.

تقبل السمة font-family قائمة مفصولة بفواصل من السلاسل، سواء كانت تشير إلى مجموعات خطوط محدّدة أو عامة. مجموعات الخطوط المحدّدة هي سلاسل محفوظة بين علامتَي اقتباس، مثل "Helvetica" أو "EB Garamond" أو "Times New Roman". مجموعات الخطوط العامة هي كلمات رئيسية مثل serif وsans-serif وmonospace (يمكنك الاطّلاع على قائمة كاملة بالخيارات في MDN). سيعرض المتصفح أول خط طباعي متاح من القائمة المتوفرة.

عند استخدام font-family، يجب تحديد مجموعة خطوط عامة واحدة على الأقل في حال لم يتضمن متصفّح المستخدم الخطوط المفضّلة لديك. بشكل عام، يجب أن تكون مجموعة الخطوط البديلة العامة مشابهة للخطوط المفضّلة لديك: في حال استخدام font-family: "Helvetica" (مجموعة خطوط Sans-serif)، يجب أن تكون مجموعة الخطوط البديلة sans-serif لمطابقتها.

استخدام الخطوط المائلة والخطوط المائلة إلى اليمين

دعم المتصفح

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1-

المصدر

استخدِم font-style لتحديد ما إذا كان النص مائلاً أم لا. يقبل font-style إحدى الكلمات الرئيسية التالية: normal وitalic وoblique.

جعل النص غامقًا

توافق المتصفّح

  • Chrome: 2-
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1-

المصدر

استخدِم font-weight لضبط "سمك الخط". تقبل هذه السمة قيم الكلمات الرئيسية (normal وbold) وقيم الكلمات الرئيسية النسبية (lighter وbolder) والقيم الرقمية (100 إلى 900).

الكلمات الرئيسية normal وbold مكافئة للقيم الرقمية 400 و700 على التوالي.

يتم احتساب الكلمات الرئيسية lighter وbolder بالنسبة إلى العنصر الرئيسي. اطّلِع على معنى الأوزان النسبية في MDN للحصول على رسم بياني مفيد يوضّح كيفية تحديد هذه القيمة.

تغيير حجم النص

دعم المتصفح

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1-

المصدر

يمكنك استخدام font-size للتحكّم في حجم عناصر النص. تقبل هذه السمة قيم الطول والنسب المئوية ومجموعة من قيم الكلمات الرئيسية.

بالإضافة إلى قيم الطول والنسبة المئوية، يقبل font-size بعض قيم الكلمات الرئيسية المطلقة (xx-small وx-small وsmall وmedium وlarge وx-large وxx-large) وقيمتين من قيم الكلمات الرئيسية النسبية (smaller وlarger). تكون القيم النسبية نسبةً إلى font-size للعنصر الرئيسي.

تغيير المسافة بين السطور

دعم المتصفح

  • Chrome: 1.
  • Edge: 12.
  • فَيَرفُكس: 1-
  • Safari: 1.

المصدر

استخدِم line-height لتحديد ارتفاع كل سطر في عنصر. تقبل هذه السمة إما رقمًا أو طولاً أو نسبة مئوية أو الكلمة الرئيسية normal. بشكل عام، ننصحك باستخدام رقم بدلاً من طول أو نسبة مئوية لتجنُّب المشاكل المتعلّقة بالتوريث.

تغيير المسافة بين الأحرف

توافق المتصفّح

  • Chrome: 1.
  • Edge: 12.
  • فَيَرفُكس: 1-
  • Safari: 1.

المصدر

استخدِم letter-spacing للتحكّم في مقدار المسافة الأفقية بين الأحرف في النص. تقبل هذه السمة قِيَم الطول، مثل em وpx وrem.

يُرجى العِلم أنّ القيمة المحدّدة تزيد من مقدار المسافة الطبيعية بين الأحرف. في العرض التقديمي التالي، حاوِل اختيار حرف فردي لمعرفة حجم مربّع الرسائل وكيفية تغيُّره باستخدام letter-spacing.

تغيير المسافة بين الكلمات

توافق المتصفّح

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

المصدر

استخدِم word-spacing لزيادة طول المسافة بين كل كلمة في النص أو تقليلها. تقبل هذه السمة قيم الطول مثل em وpx وrem. لاحظ أن الطول الذي تحدده هو مسافة إضافية بالإضافة إلى المسافات العادية. وهذا يعني أن السمة word-spacing: 0 تعادل word-spacing: normal.

اختصار "font"

يمكنك استخدام السمة المختصرة font لضبط العديد من السمات ذات الصلة بالخط في آنٍ واحد. تشمل قائمة السمات المحتمَلة font-family وfont-size وfont-stretch وfont-style وfont-variant وfont-weight وline-height.

اطّلِع على مقالة font في MDN لمعرفة تفاصيل كيفية ترتيب هذه المواقع.

تغيير حالة النص

توافق المتصفّح

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

المصدر

يمكنك استخدام text-transform لتعديل طريقة الكتابة بالأحرف اللاتينية الكبيرة في النص بدون الحاجة إلى تغيير رمز HTML الأساسي. يقبل هذا الحقل قيم الكلمات الرئيسية التالية: uppercase وlowercase وcapitalize.

إضافة خطوط سفلية وخطوط علوية وخطوط من خلال النص

توافق المتصفّح

  • Chrome: 1-
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1-

المصدر

يمكنك استخدام text-decoration لإضافة أسطر إلى النص. وغالبًا ما يتم استخدام الشرطات السفلية، ولكن يمكنك إضافة خطوط فوق النص أو خلاله.

والسمة text-decoration هي اختصار للسمات الأكثر تحديدًا والمفصّلة أدناه.

تقبل السمة text-decoration-line الكلمات الرئيسية underline وoverline وline-through. يمكنك أيضًا تحديد كلمات رئيسية متعددة لعدة أسطر.

تحدّد السمة text-decoration-color لون كل الزخارف من text-decoration-line.

تقبل السمة text-decoration-style الكلمات الرئيسية solid وdouble وdotted وdashed وwavy.

تقبل السمة text-decoration-thickness أي قيم طول وتضبط عرض الخط لجميع الزخارف من text-decoration-line.

سمة text-decoration هي اختصار لجميع السمات أعلاه.

إضافة مسافة بادئة إلى النص

دعم المتصفح

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1-

المصدر

استخدِم text-indent لإضافة مسافة بادئة إلى المجموعات النصية. تأخذ هذه السمة إما طولًا (على سبيل المثال، 10px أو 2em) أو نسبة مئوية من عرض الكتلة التي تحتوي على العنصر.

التعامل مع المحتوى المتجاوز أو المخفي

دعم المتصفح

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: الإصدار 1.3.

المصدر

استخدِم text-overflow لتحديد كيفية عرض المحتوى المخفي. هناك خياران: clip (الخيار التلقائي)، الذي يقتطع النص عند نقطة تجاوز السعة، وellipsis الذي يعرض علامة حذف (...) عند نقطة تجاوز النص.

التحكّم في المساحة البيضاء

توافق المتصفّح

  • Chrome: 1.
  • Edge: 12.
  • فَيَرفُكس: 1-
  • Safari: 1-

المصدر

تُستخدَم السمة white-space لتحديد كيفية التعامل مع المسافات البيضاء في العنصر. لمزيد من التفاصيل، راجِع مقالة white-space حول MDN.

يمكن أن يكون white-space: pre مفيدًا لعرض فن ASCII أو مجموعات الرموز البرمجية التي تمّت إضافة مسافات بادئة لها بعناية.

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

توافق المتصفّح

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

المصدر

استخدِم word-break لتغيير طريقة "تقسيم" الكلمات عندما تتجاوز مساحة السطر. لن يقسّم المتصفّح الكلمات تلقائيًا. سيؤدي استخدام قيمة الكلمة الرئيسية break-all لـ word-break إلى توجيه المتصفح لتقسيم الكلمات إلى أحرف فردية إذا لزم الأمر.

تغيير محاذاة النص

توافق المتصفّح

  • Chrome: 1.
  • Edge: 12.
  • فَيَرفُكس: 1-
  • Safari: 1.

المصدر

استخدِم text-align لتحديد المحاذاة الأفقية للنص في عنصر خلية جدول أو عنصر مربّع. يقبل هذا الحقل قيم الكلمات الرئيسية left وright وstart وend وcenter وjustify وmatch-parent.

تؤدي القيمتَان left وright إلى محاذاة النص على الجانبَين الأيمن والأيسر من المربّع، على التوالي.

استخدِم start وend لتمثيل موضع بداية سطر نص ونهايته في وضع الكتابة الحالي. وبالتالي، يتم ربط start بـ left باللغة الإنجليزية، وبـ right باللغة العربية التي تُكتب من اليمين إلى اليسار. وهي عبارة عن محاذاة منطقية، ويمكنك الاطّلاع على مزيد من المعلومات في وحدة السمات المنطقية.

استخدِم center لمحاذاة النص في منتصف المربّع.

تنظِّم قيمة justify النص وتغيّر المسافات بين الكلمات تلقائيًا لكي يتم محاذاة النص مع الحافتَين اليمنى واليسرى للكتلة.

تغيير اتجاه النص

توافق المتصفّح

  • Chrome: 2-
  • الحافة: 12.
  • Firefox: 1.
  • Safari: 1.

المصدر

استخدِم direction لضبط اتجاه النص، إما ltr (من اليسار إلى اليمين، الإعداد التلقائي) أو rtl (من اليمين إلى اليسار). تُكتب بعض اللغات، مثل العربية أو العبرية أو الفارسية، من اليمين إلى اليسار، لذا يجب استخدام direction: rtl. للغة الإنجليزية وجميع اللغات الأخرى التي تُكتب من اليسار إلى اليمين، يمكنك استخدام direction: ltr.

تغيير تدفّق النص

توافق المتصفّح

  • Chrome: 48.
  • الحافة: 12.
  • Firefox: 41.
  • Safari: الإصدار 10.1.

المصدر

استخدِم writing-mode لتغيير طريقة تدفق النص وترتيبه. الإعداد التلقائي هو horizontal-tb، ولكن يمكنك أيضًا ضبط writing-mode على vertical-lr أو vertical-rl للنص الذي تريد عرضه أفقيًا.

تغيير اتجاه النص

دعم المتصفح

  • Chrome: 48
  • ‫Edge: 79
  • Firefox: 41.
  • ‫Safari: 14

المصدر

استخدِم text-orientation لتحديد اتجاه الأحرف في النص. القيمتان الصالحتان لهذه السمة هما mixed وupright. هذه السمة ذات صلة فقط عند ضبط writing-mode على قيمة أخرى غير horizontal-tb.

إضافة ظل إلى النص

توافق المتصفّح

  • Chrome: 2-
  • الحافة: 12.
  • Firefox: 3.5
  • ‫Safari: 1.1

المصدر

استخدِم text-shadow لإضافة ظل إلى النص. تتوقع هذه السمة ثلاثة أطوال (x-offset وy-offset وblur-radius) ولون.

اطّلِع على قسم text-shadow من وحدتنا حول "الظلال" للاطّلاع على مزيد من المعلومات.

الخطوط المتغيّرة

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

Roboto Flex في مجموعات عشوائية من العرض والوزن

راجع مقالتنا عن الخطوط المتغيّرة لمزيد من التفاصيل.

العناصر الزائفة

::first-letter و::first-line عنصر زائف

توافق المتصفّح

  • Chrome: 1.
  • الحافة: 12.
  • Firefox: 1.
  • Safari: 1.

المصدر

تستهدف العنصران العنصران الزائفان ::first-letter و::first-line الحرف الأول من عنصر النص والسطر الأول منه على التوالي.

العنصر النائب ::selection

توافق المتصفّح

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62
  • ‫Safari: 1.1

المصدر

استخدِم العنصر النائب ::selection لتغيير مظهر النص الذي يختاره المستخدم.

عند استخدام هذا العنصر الاصطناعي، يمكن استخدام سمات CSS معيّنة فقط: color وbackground-color وtext-decoration وtext-shadow وstroke-color وfill-color وstroke-width.

تنوع الخط

توافق المتصفّح

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1-

المصدر

السمة font-variant هي اختصار لعدد من سمات CSS التي تتيح لك اختيار صيغ الخطوط، مثل small-caps وslashed-zero. تشمل خصائص CSS التي يتضمّنها هذا الاختصار font-variant-alternates وfont-variant-caps وfont-variant-east-asian وfont-variant-ligatures وfont-variant-numeric. اطّلِع على الروابط في كلّ موقع للحصول على مزيد من التفاصيل حول استخدامها.

التحقّق من فهمك

اختبِر معلوماتك حول أسلوب الخط على الويب

أيّ من الكلمات الرئيسية التالية يمكن استخدامها كبديل عام font-family؟

serif
إجابة صحيحة.
monospace
إجابة صحيحة.
italic
يُرجى إعادة المحاولة. italic هي كلمة رئيسية صالحة لـ font-style، وليس font-family.
sci-fi
يُرجى إعادة المحاولة. ومع ذلك، يُعدّ fantasy بديلاً عامًا صالحًا لـ font-family.
sans-serif
إجابة صحيحة.
helvetica
يُرجى إعادة المحاولة. "Helvetica" ليست كلمة رئيسية عامة، بل تشير إلى مجموعة خطوط معيّنة.

ما هي العبارة المستخدَمة لتحويل الحرف الأول من كل كلمة إلى حرف كبير؟ على سبيل المثال، This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;
يُرجى إعادة المحاولة.
text-case: capitalize;
يُرجى إعادة المحاولة.
text-transform: capitalize;
إجابة صحيحة.
font-style: capitals;
يُرجى إعادة المحاولة.
font-variant: capitalize;
يُرجى إعادة المحاولة.

صواب أم خطأ: استخدِم text-orientation لمحاذاة النص إلى اليسار أو اليمين أو الوسط.

صحيح
يُرجى إعادة المحاولة. يغيّر رمز text-orientation دوران الأحرف في سطر.
خطأ
إجابة صحيحة. يغيّر text-orientation دوران الأحرف في سطر. استخدِم text-align لمحاذاة النص على يمين الصفحة أو يسارها أو في وسطها (وأكثر من ذلك).

ما خاصية CSS التي يمكن استخدامها لتغيير المسافة بين سطور النص؟

line-spacing
يُرجى إعادة المحاولة.
leading
يُرجى إعادة المحاولة. Leading هو المصطلح الصحيح للمساحة بين السطور في الطباعة، ولكنه ليس خاصية صالحة في CSS.
baseline-distance
يُرجى إعادة المحاولة.
line-height
إجابة صحيحة.

الموارد