The CSS Podcast - 036: Text & Typography
النص هو أحد العناصر الأساسية للويب.
عند إنشاء موقع إلكتروني، ليس من الضروري تصميم النص، إذ يتضمّن HTML بعض التصاميم التلقائية المعقولة.
ومع ذلك، من المرجّح أن يشكّل النص الجزء الأكبر من موقعك الإلكتروني، لذا من المفيد إضافة بعض الأنماط لتحسين مظهره. من خلال تغيير بعض الخصائص الأساسية، يمكنك تحسين تجربة القراءة لدى المستخدمين بشكل كبير.
في هذه الوحدة، سنبدأ بقاعدة @font-face
التي تتيح لك استيراد خطوط مخصّصة إلى صفحات الويب. يضمن ذلك توفُّر الطباعة التي تحتاج إليها بالضبط، بغض النظر عن الخطوط المثبَّتة من قِبل المستخدم.
بعد ذلك، سنتناول خصائص خطوط CSS الأساسية، بما في ذلك font-family
وfont-style
وfont-weight
وfont-size
. تضع هذه الأساسيات
اللبنات الأساسية للتعامل مع النص من أجل تحسين مظهره وقراءته.
سنتناول أيضًا خصائص خاصة بالفقرات، مثل text-indent
وword-spacing
، قبل أن نختتم بمواضيع متقدّمة، مثل الخطوط المتغيرة والعناصر الزائفة، التي تتيح لك تحكّمًا أكبر في الطباعة.
سيتم تقديم أمثلة عملية ونصائح خلال الدورة التدريبية لتعزيز فهمك لهذه الأساليب وتطبيقها.
قاعدة @font-face
تُعدّ قاعدة @font-face
في CSS أداة أساسية في تصميم الويب، فهي تتيح لك تحديد خطوط مخصّصة واستخدامها لعرض النص. تكمن ميزة @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 |
Web Open Font Format | font/woff |
Web Open Font Format 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
لتتطابق معها.
استخدام الخطوط المائلة والمائلة المائلة
استخدِم font-style
لتحديد ما إذا كان يجب أن يكون النص مائلاً أم لا. تقبل السمة font-style
إحدى الكلمات الرئيسية التالية: normal
وitalic
وoblique
.
تغميق النص
استخدِم font-weight
لضبط "درجة التمييز" للنص. تقبل هذه السمة قيم الكلمات الرئيسية (normal
وbold
) وقيم الكلمات الرئيسية النسبية (lighter
وbolder
) والقيم الرقمية (من 100
إلى 900
).
الكلمتان الرئيسيتان normal
وbold
تعادلان القيمتين الرقميتين 400
و700
على التوالي.
يتم احتساب الكلمتَين الرئيسيتَين lighter
وbolder
بالنسبة إلى العنصر الأصل. راجِع معنى الأوزان النسبية على شبكة مطوّري Mozilla للحصول على رسم بياني مفيد يوضّح كيفية تحديد هذه القيمة.
تغيير حجم النص
استخدِم 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
على شبكة مطوّري Mozilla لمعرفة التفاصيل حول كيفية ترتيب هذه الخصائص.
إضافة تسطير سفلي وعلوي وخط يتوسط النص
استخدِم 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
في تنظيم النص وتغيير المسافات بين الكلمات تلقائيًا ليتطابق النص مع الحافتين اليمنى واليسرى للفقرة.
التحكّم في طريقة التفاف النص
استخدِم text-wrap
لتغيير طريقة التفاف النص داخل أحد العناصر.
تشمل الكلمات الرئيسية المقبولة لهذه السمة wrap
وnowrap
وbalance
وstable
. القيمة التلقائية هي wrap
، ما يقلّل من تجاوز السعة من خلال التفاف النص
على الأسطر على طول المسافات العادية وفواصل الكلمات.
يمكنك استخدام الكلمة الرئيسية nowrap
لتحقيق العكس تمامًا ومنع النص من الانقسام على عدة أسطر، ما قد يؤدي إلى حدوث تجاوز.
للحصول على المقدار نفسه من النص في كل سطر عند كتابة العناوين الرئيسية مثلاً، استخدِم الكلمة الرئيسية balance
. لتحسين الأداء، لن تطبّق المتصفّحات هذه القيمة إلا على العناصر التي تتضمّن ستة أسطر من النص أو أقل.
تعمل الكلمة الرئيسية stable
بشكل مشابه للكلمة الرئيسية wrap
، ولكنّها مخصّصة للاستخدام مع نص contenteditable. عند ضبط text-wrap: stable
، لن يتم تغيير ترتيب الأسطر أعلاه أثناء عملية التعديل.
في بعض الأحيان، يمكن أن تتجاوز السلاسل الطويلة التي لا تتضمّن نقطة توقّف واضحة الحاويات.
للتحكّم في طريقة تقسيم هذا النوع من النصوص، استخدِم
overflow-wrap
.
الكلمات الرئيسية التي يمكنك استخدامها لهذه السمة هي normal
وbreak-word
وanywhere
. الإعداد التلقائي هو normal
ولن يتم تقسيم النص إلى السطر التالي إلا إذا كان يتضمّن مسافات أو فواصل طبيعية.
تضيف القيمتان anywhere
وbreak-word
نقاط توقّف في أي مكان داخل السلسلة لمنع تجاوز السعة. تختلف الكلمات الرئيسية في طريقة استجابتها min-content
للحجمmin-content
الداخلي أو الصريح. تسمح الكلمة الرئيسية anywhere
بجميع فرص التوقف المؤقت الممكنة. لا تتضمّن قيمة break-word
أي مسافات، ما يجعل النص
بطول أطول كلمة.
تغيير اتجاه النص
استخدِم 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
helvetica
monospace
sci-fi
italic
sans-serif
ما هي العبارة المستخدَمة لتحويل الحرف الأول من كل كلمة إلى حرف كبير؟ على سبيل المثال، This is a sentence.
➡ This Is A Sentence.
text-transform: capitalize;
font-variant: capitalize;
font-style: capitals;
text-capitalize: true;
text-case: capitalize;
صواب أم خطأ: استخدِم text-orientation
لمحاذاة النص إلى اليمين أو اليسار أو الوسط.
ما هي خاصية CSS التي يمكن استخدامها لتغيير المسافة بين أسطر النص؟
baseline-distance
line-spacing
line-height
leading
الموارد
- تتناول أفضل الممارسات المتعلّقة بالخطوط استيراد الخطوط وعرضها وغير ذلك من أفضل الممارسات لاستخدام الخطوط على الويب.
- مستندات MDN الأساسية حول أنماط النصوص والخطوط