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

بودكاست CSS - 036: النص وأسلوب الخط

النص هو أحد المكوّنات الأساسية على الويب.

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

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

في هذه الوحدة، سنلقي نظرة أولاً على بعض خصائص الخطوط الأساسية في CSS، مثل font-family وfont-style وfont-weight وfont-size. بعد ذلك، سوف نتعمق في الخصائص التي تؤثر في فقرات النص، مثل text-indent وword-spacing. تنتهي الوحدة ببعض الموضوعات الأكثر تقدمًا مثل الخطوط المتغيرة والعناصر الزائفة.

تغيير الخط الطباعي

دعم المتصفح

  • 1
  • 12
  • 1
  • 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 لمطابقة الخطوط.

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

دعم المتصفح

  • 1
  • 12
  • 1
  • 1

المصدر

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

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

دعم المتصفح

  • 2
  • 12
  • 1
  • 1

المصدر

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

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

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

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

دعم المتصفح

  • 1
  • 12
  • 1
  • 1

المصدر

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

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

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

دعم المتصفح

  • 1
  • 12
  • 1
  • 1

المصدر

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

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

دعم المتصفح

  • 1
  • 12
  • 1
  • 1

المصدر

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

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

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

دعم المتصفح

  • 1
  • 12
  • 1
  • 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 للحصول على تفاصيل عن كيفية طلب هذه السمات.

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

دعم المتصفح

  • 1
  • 12
  • 1
  • 1

المصدر

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

إضافة تسطير وخطوط جانبية إلى النص

دعم المتصفح

  • 1
  • 12
  • 1
  • 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 هي اختصار لجميع المواقع الإلكترونية أعلاه.

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

دعم المتصفح

  • 1
  • 12
  • 1
  • 1

المصدر

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

التعامل مع المحتوى المخفي أو الفائض

دعم المتصفح

  • 1
  • 12
  • 7
  • 1.3

المصدر

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

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

دعم المتصفح

  • 1
  • 12
  • 1
  • 1

المصدر

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

يمكن أن تكون white-space: pre مفيدة في عرض فن ASCII أو كتل الرموز الموضوعة بفواصل بادئة بعناية.

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

دعم المتصفح

  • 1
  • 12
  • 15
  • 3

المصدر

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

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

دعم المتصفح

  • 1
  • 12
  • 1
  • 1

المصدر

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

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

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

استخدِم center لمحاذاة النص إلى وسط القطعة.

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

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

دعم المتصفح

  • 2
  • 12
  • 1
  • 1

المصدر

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

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

دعم المتصفح

  • 48
  • 12
  • 41
  • 10.1

المصدر

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

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

دعم المتصفح

  • 48
  • 79
  • 41
  • 14

المصدر

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

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

دعم المتصفح

  • 2
  • 12
  • 3.5
  • 1.1

المصدر

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

راجع قسم text-shadow من وحدتنا حول الظلال للحصول على مزيد من المعلومات.

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

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

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

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

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

::first-letter و::first-line عنصر غير حقيقي

دعم المتصفح

  • 1
  • 12
  • 1
  • 1

المصدر

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

عنصر غير حقيقي ::selection

دعم المتصفح

  • 1
  • 12
  • 62
  • 1.1

المصدر

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

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

font-variant

دعم المتصفح

  • 1
  • 12
  • 1
  • 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
يُرجى إعادة المحاولة. البادئة هي المصطلح الصحيح للمسافة بين السطور في أسلوب الخط، ولكنها ليست خاصية CSS صالحة.
baseline-distance
يُرجى إعادة المحاولة.
line-height
إجابة صحيحة

المراجِع