بودكاست CSS - 036: النص وأسلوب الخط
النص هو أحد المكوّنات الأساسية على الويب.
عند إنشاء موقع إلكتروني، لا تحتاج بالضرورة إلى تعديل نمط النص، لأنّ تنسيق HTML في الواقع يكون له نمط تلقائي معقول إلى حدٍّ ما.
ومع ذلك، من المرجح أن يشكّل النص الغالبية العظمى من محتوى موقعك الإلكتروني، لذا من المفيد إضافة بعض الأنماط الرائعة لتحسين الموقع. يمكنك تحسين تجربة القراءة للمستخدمين بشكل ملحوظ من خلال تغيير بعض الخصائص الأساسية.
في هذه الوحدة، سنلقي نظرة أولاً على بعض خصائص الخطوط الأساسية في CSS، مثل font-family
وfont-style
وfont-weight
وfont-size
. بعد ذلك، سوف نتعمق في الخصائص التي تؤثر في فقرات النص، مثل text-indent
وword-spacing
. تنتهي الوحدة ببعض الموضوعات الأكثر تقدمًا مثل الخطوط المتغيرة والعناصر الزائفة.
تغيير الخط الطباعي
يمكنك استخدام font-family
لتغيير خط النص.
تقبل السمة font-family
قائمة سلاسل مفصولة بفواصل تشير إما إلى مجموعات خطوط محددة أو عامة. عائلات الخطوط المحدّدة هي سلاسل بين علامات اقتباس، مثل "Helvetica" أو "EB Garamond" أو "Times New Roman". مجموعات الخطوط العامة هي كلمات رئيسية مثل serif
وsans-serif
وmonospace
(اطّلِع على قائمة كاملة بالخيارات على MDN). سيعرض المتصفح أول خط طباعي متاح من القائمة المتوفرة.
عند استخدام font-family
، يجب تحديد مجموعة خطوط عامة واحدة على الأقل في حال عدم توفّر الخطوط المفضّلة لديك في متصفّح المستخدم. بشكل عام، يجب أن تكون مجموعة الخطوط العامة الاحتياطية مماثلة للخطوط التي تفضّلها: في حال استخدام font-family: "Helvetica"
(مجموعة خطوط sans-serif)، يجب أن يكون العنصر الاحتياطي هو sans-serif
لمطابقة الخطوط.
استخدام الخطوط المائلة والمائلة
يمكنك استخدام font-style
لتحديد ما إذا كان النص يجب أن يكون مائلاً أم لا. تقبل الدالة font-style
إحدى الكلمات الرئيسية التالية: normal
وitalic
وoblique
.
جعل النص غامقًا
استخدِم font-weight
لضبط "درجة غامق" النص. تقبل هذه السمة قيم الكلمات الرئيسية (normal
وbold
) وقيم الكلمات الرئيسية النسبية (lighter
وbolder
) والقيم الرقمية (من 100
إلى 900
).
تتساوى الكلمتان الرئيسيتان normal
وbold
للقيمتين الرقميتين 400
و700
على التوالي.
يتم احتساب الكلمتين الرئيسيتين lighter
وbolder
بالنسبة إلى العنصر الرئيسي. راجع معنى الأوزان النسبية لحساب MDN للحصول على رسم بياني مفيد يوضح كيفية تحديد هذه القيمة.
تغيير حجم النص
يمكنك استخدام font-size
للتحكّم في حجم العناصر النصية. تقبل هذه السمة قيم الطول والنسب المئوية وعدد قليل من قيم الكلمات الرئيسية.
بالإضافة إلى قيم الطول والنسب المئوية، تقبل font-size
بعض قيم الكلمات الرئيسية المطلقة (xx-small
، وx-small
، وsmall
، وmedium
، وlarge
، وx-large
، وxx-large
) وقيمتين نسبيتين للكلمات الرئيسية (smaller
، larger
). وتكون القيم النسبية مرتبطة بقيم font-size
للعنصر الرئيسي.
تغيير المسافة بين السطور
استخدِم line-height
لتحديد ارتفاع كل سطر في العنصر. تقبل هذه السمة عددًا أو طولاً أو نسبة مئوية أو الكلمة الرئيسية normal
. ننصح عمومًا باستخدام رقم بدلاً من المدة أو النسبة المئوية لتجنب مشاكل الوراثة.
تغيير المسافة بين الأحرف
يمكنك استخدام letter-spacing
للتحكّم في مقدار المسافة الأفقية بين الأحرف في النص. تقبل هذه السمة قيم الطول، مثل em
وpx
وrem
.
تجدر الإشارة إلى أنّ القيمة المحدّدة تزيد من المسافة الطبيعية بين الأحرف. في العرض التوضيحي أدناه، جرِّب اختيار حرف فردي للاطّلاع على حجم صندوق الرسائل وكيفية تغييره باستخدام letter-spacing
.
تغيير المسافة بين الكلمات
استخدِم 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 للحصول على تفاصيل عن كيفية طلب هذه السمات.
تغيير حالة النص
استخدِم text-transform
لتعديل طريقة الكتابة بالأحرف اللاتينية الكبيرة في النص بدون الحاجة إلى تغيير رمز HTML الأساسي. تقبل هذه السمة قيم الكلمات الرئيسية التالية: uppercase
وlowercase
وcapitalize
.
إضافة تسطير وخطوط جانبية إلى النص
استخدِم 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
هي اختصار لجميع المواقع الإلكترونية أعلاه.
إضافة مسافة بادئة إلى النص
استخدِم text-indent
لإضافة مسافة بادئة إلى المجموعات النصية. تأخذ هذه السمة إما طولاً (على سبيل المثال، 10px
أو 2em
) أو نسبة مئوية من عرض القطعة التي تتضمنها.
التعامل مع المحتوى المخفي أو الفائض
استخدِم text-overflow
لتحديد كيفية تمثيل المحتوى المخفي. يتوفّر خياران: clip
(الخيار التلقائي) الذي يقتطع النص عند نقطة تجاوز السعة، وellipsis
الذي يعرض علامة حذف (...) عند نقطة تجاوز السعة.
التحكّم في المسافة البيضاء
تُستخدَم السمة white-space
لتحديد كيفية معالجة المسافة البيضاء في عنصر. لمزيد من التفاصيل، يُرجى الاطّلاع على مقالة white-space
حول MDN.
يمكن أن تكون white-space: pre
مفيدة في عرض فن ASCII أو كتل الرموز الموضوعة بفواصل بادئة بعناية.
التحكّم في كيفية تقسيم الكلمات
استخدِم word-break
لتغيير كيفية جعل الكلمات "مُعطلة" عندما تتجاوز الحد المسموح به. بشكل افتراضي، لن يقسم المتصفح الكلمات. يؤدي استخدام قيمة الكلمة الرئيسية break-all
التي تخصّ word-break
إلى توجيه المتصفّح إلى تقسيم الكلمات عند الأحرف الفردية إذا لزم الأمر.
تغيير محاذاة النص
يمكنك استخدام text-align
لتحديد المحاذاة الأفقية للنص في عنصر في كتلة أو جدول. تقبل هذه السمة قيم الكلمات الرئيسية left
وright
وstart
وend
وcenter
وjustify
وmatch-parent
.
تحاذي القيمتان left
وright
النص إلى الجانبين الأيسر والأيمن من الكتلة، على التوالي.
استخدِم start
وend
لتمثيل موضع بداية سطر النص ونهايته في وضع الكتابة الحالي. لذلك، يتم تعيين start
إلى left
باللغة الإنجليزية، وإلى right
في النص العربي المكتوب من اليمين إلى اليسار (RTL). إنها محاذاة منطقية. تعرّف على مزيد من المعلومات في وحدة الخصائص المنطقية.
استخدِم center
لمحاذاة النص إلى وسط القطعة.
تعمل قيمة justify
على تنظيم النص وتغيير تباعد الكلمات تلقائيًا بحيث تتم محاذاة النص مع الحافتين اليمنى واليسرى للكتلة.
تغيير اتجاه النص
استخدِم direction
لضبط اتجاه النص، إما ltr
(من اليسار إلى اليمين، أو الإعداد التلقائي) أو rtl
(من اليمين إلى اليسار). إنّ بعض اللغات مثل العربية أو العبرية أو الفارسية تكون مكتوبة من اليمين إلى اليسار، لذا يجب استخدام direction: rtl
. للّغة الإنجليزية وجميع اللغات الأخرى التي تُكتب من اليسار إلى اليمين، يمكنك استخدام direction: ltr
.
تغيير تدفق النص
استخدِم writing-mode
لتغيير طريقة تدفق النص وترتيبه. الإعداد التلقائي هو horizontal-tb
، ولكن يمكنك أيضًا ضبط writing-mode
على vertical-lr
أو vertical-rl
للنص الذي تريد أن يتدفق أفقيًا.
تغيير اتجاه النص
استخدِم text-orientation
لتحديد اتجاه الأحرف في النص. القيمتان الصالحتان لهذه السمة هما mixed
وupright
. هذه السمة ملائمة فقط عند ضبط writing-mode
على خيار آخر غير horizontal-tb
.
إضافة ظل إلى النص
استخدِم text-shadow
لإضافة ظل إلى النص. من المتوقّع أن تكون هذه السمة ثلاثة أطوال (x-offset
وy-offset
وblur-radius
) ولون.
راجع قسم text-shadow
من وحدتنا حول الظلال للحصول على مزيد من المعلومات.
الخطوط المتغيّرة
عادةً ما تتطلب الخطوط "العادية" استيراد ملفات مختلفة لإصدارات مختلفة من الخط الطباعي، مثل الخط الغامق أو المائل أو المكثف. الخطوط المتغيرة هي خطوط يمكن أن تحتوي على العديد من المتغيرات المختلفة لخط طباعي في ملف واحد.
راجع مقالتنا عن الخطوط المتغيرة للحصول على مزيد من التفاصيل.
العناصر الزائفة
::first-letter
و::first-line
عنصر غير حقيقي
يستهدف العنصران الزائفان ::first-letter
و::first-line
الحرف الأول من العنصر النصي والسطر الأول على التوالي.
عنصر غير حقيقي ::selection
يمكنك استخدام العنصر الزائف ::selection
لتغيير مظهر النص الذي يختاره المستخدم.
عند استخدام هذا العنصر الزائف، يمكن استخدام خصائص CSS محدّدة فقط: color
وbackground-color
وtext-decoration
وtext-shadow
وstroke-color
وfill-color
وstroke-width
.
font-variant
السمة 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
baseline-distance
line-height
المراجِع
- تتناول صفحة أفضل الممارسات المتعلقة بالخطوط استيراد الخطوط وعرضها وأفضل الممارسات الأخرى لاستخدام الخطوط على الويب.
- نص MDN Basic ونمط الخط: