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؟
serifmonospaceitalicitalic هي كلمة رئيسية صالحة لـ font-style، وليس font-family.sci-fifantasy بديلاً عامًا صالحًا لـ font-family.sans-serifhelvetica"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-spacingleadingbaseline-distanceline-heightالموارد
- تتناول أفضل الممارسات المتعلّقة بالخطوط استيراد الخطوط وعرضها وأفضل الممارسات الأخرى لاستخدام الخطوط على الويب.
- أساسيات تنسيق النصوص والخطوط في MDN