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

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

عند إنشاء موقع إلكتروني، ليس من الضروري تصميم النص، إذ يتضمّن 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.

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

Browser Support

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

Source

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

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

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

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

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

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

Browser Support

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

Source

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

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

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

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

Browser Support

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

Source

استخدِم 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 لمعرفة تفاصيل كيفية ترتيب هذه المواقع.

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

Browser Support

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

Source

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

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

Browser Support

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

Source

استخدِم 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 هي اختصار لجميع السمات أعلاه.

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

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

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

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

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

Browser Support

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

Source

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

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

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

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

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

Browser Support

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

Source

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

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

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

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

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

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

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

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

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

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

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

تنوع الخط

Browser Support

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

Source

السمة 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 احتياطي عام؟

sans-serif
italic
helvetica
sci-fi
serif
monospace

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

text-capitalize: true;
text-case: capitalize;
font-variant: capitalize;
font-style: capitals;
text-transform: capitalize;

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

خطأ
True

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

line-height
line-spacing
baseline-distance
leading

الموارد