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