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

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

النص هو إحدى الوحدات الأساسية للويب.

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

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

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

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

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

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

قاعدة @font-face

تُعدّ قاعدة 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 بنص عربي مكتوب من اليمين إلى اليسار (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. اطّلِع على الروابط على كل موقع إلكتروني للحصول على مزيد من التفاصيل حول استخدامه.

التحقق من فهمك

اختبر معلوماتك حول أسلوب الخط على الويب

المراجع

• تتناول أفضل ممارسات الخطوط استيراد الخطوط وعرض الخطوط، وغيرها من أفضل الممارسات المتعلقة باستخدام الخطوط على الويب.
• نمط الخط والنص الأساسي في MDN