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.
تغيير نوع الخط
استخدِم 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
باللغة العربية التي تُكتب من اليمين إلى اليسار. وهي عبارة عن محاذاة منطقية، ويمكنك الاطّلاع على مزيد من المعلومات في وحدة السمات المنطقية.
استخدِم 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
هي اختصار لعدد من سمات 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
helvetica
sci-fi
monospace
italic
serif
ما هي العبارة المستخدَمة لتحويل الحرف الأول من كل كلمة إلى حرف كبير؟ على سبيل المثال، This is a sentence.
➡ This Is A Sentence.
text-case: capitalize;
font-style: capitals;
font-variant: capitalize;
text-capitalize: true;
text-transform: capitalize;
صواب أم خطأ: استخدِم text-orientation
لمحاذاة النص إلى اليسار أو اليمين أو الوسط.
ما خاصية CSS التي يمكن استخدامها لتغيير المسافة بين سطور النص؟
line-height
baseline-distance
line-spacing
leading
الموارد
- تتناول أفضل الممارسات المتعلّقة بالخطوط استيراد الخطوط وعرضها وأفضل الممارسات الأخرى لاستخدام الخطوط على الويب.
- أساسيات تنسيق النصوص والخطوط في MDN