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

The CSS Podcast - 036: Text & Typography

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

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

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

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

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

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

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

قاعدة @font-face

تُعدّ قاعدة @font-face في CSS أداة أساسية في تصميم الويب، فهي تتيح لك تحديد خطوط مخصّصة واستخدامها لعرض النص. تكمن ميزة @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
Web Open Font Format font/woff
Web Open Font Format 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 لتتطابق معها.

استخدام الخطوط المائلة والمائلة المائلة

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 بالنسبة إلى العنصر الأصل. راجِع معنى الأوزان النسبية على شبكة مطوّري Mozilla للحصول على رسم بياني مفيد يوضّح كيفية تحديد هذه القيمة.

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

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 على شبكة مطوّري Mozilla لمعرفة التفاصيل حول كيفية ترتيب هذه الخصائص.

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

Browser Support

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

Source

استخدِم السمة [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/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: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

استخدِم text-wrap لتغيير طريقة التفاف النص داخل أحد العناصر.

تشمل الكلمات الرئيسية المقبولة لهذه السمة wrap وnowrap وbalance وstable. القيمة التلقائية هي wrap، ما يقلّل من تجاوز السعة من خلال التفاف النص على الأسطر على طول المسافات العادية وفواصل الكلمات.

يمكنك استخدام الكلمة الرئيسية nowrap لتحقيق العكس تمامًا ومنع النص من الانقسام على عدة أسطر، ما قد يؤدي إلى حدوث تجاوز.

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

تعمل الكلمة الرئيسية stable بشكل مشابه للكلمة الرئيسية wrap، ولكنّها مخصّصة للاستخدام مع نص contenteditable. عند ضبط text-wrap: stable، لن يتم تغيير ترتيب الأسطر أعلاه أثناء عملية التعديل.

في بعض الأحيان، يمكن أن تتجاوز السلاسل الطويلة التي لا تتضمّن نقطة توقّف واضحة الحاويات. للتحكّم في طريقة تقسيم هذا النوع من النصوص، استخدِم overflow-wrap.

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

الكلمات الرئيسية التي يمكنك استخدامها لهذه السمة هي normal وbreak-word وanywhere. الإعداد التلقائي هو normal ولن يتم تقسيم النص إلى السطر التالي إلا إذا كان يتضمّن مسافات أو فواصل طبيعية.

تضيف القيمتان anywhere وbreak-word نقاط توقّف في أي مكان داخل السلسلة لمنع تجاوز السعة. تختلف الكلمات الرئيسية في طريقة استجابتها min-content للحجمmin-content الداخلي أو الصريح. تسمح الكلمة الرئيسية anywhere بجميع فرص التوقف المؤقت الممكنة. لا تتضمّن قيمة break-word أي مسافات، ما يجعل النص بطول أطول كلمة.

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

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.

font-variant

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 بديل عام؟

serif
helvetica
monospace
sci-fi
italic
sans-serif

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

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

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

True
خطأ

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

baseline-distance
line-spacing
line-height
leading

الموارد