الدرس السابع: التحكم في الخطوط باستخدام CSS – دليل شامل للمبتدئين
تُعتبر الخطوط من العناصر الأساسية التي تؤثر بشكل كبير على تجربة المستخدم ووضوح المحتوى في صفحات الويب. اختيار الخط المناسب وتنسيقه بطريقة صحيحة يساهم في تعزيز جمالية الموقع، سهولة القراءة، ونقل هوية العلامة التجارية بشكل فعّال. في هذا الدرس، سنتعرف على كيفية التحكم في الخطوط باستخدام CSS من خلال مجموعة من الخصائص المهمة مثل حجم الخط، نوعه، سمكه، ونمطه، مما يساعدك على تحسين تصميم موقعك وجعله أكثر احترافية وجاذبية.
1. خاصية font-family - اختيار نوع الخط
تحدد خاصية font-family نوع الخط المستخدم لعرض النص داخل العنصر المحدد.
يمكنك اختيار خطوط شائعة موجودة على معظم الأجهزة مثل Arial أو Times New Roman، أو استخدام خطوط مخصصة من مصادر خارجية مثل Google Fonts لإضفاء طابع مميز على موقعك.
النسخ الاحتياطية:
من المهم دائمًا تحديد مجموعة من الخطوط كنسخ احتياطية، لأن بعض الخطوط قد لا تكون متوفرة على جهاز المستخدم.
عند عدم توفر الخط الأول، يتم التراجع إلى الخط التالي في القائمة، وهكذا.
يُنصح بإنهاء القائمة بنوع عام مثل serif أو sans-serif لضمان عرض النص حتى في حالة عدم توفر أي من الخطوط المحددة.
p {
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}
باستخدام Google Fonts، يمكنك استيراد الخطوط عبر رابط في <head> ثم استخدامها في CSS:
font-family: 'Cairo', sans-serif;
2. خاصية font-size - حجم الخط
تُستخدم خاصية font-size لتحديد حجم النص في الصفحة، ويمكن التعبير عنها باستخدام وحدات متعددة، أهمها:
- الوحدات الثابتة (مثل
px): تحدد حجم الخط بشكل دقيق وثابت، على سبيل المثال16pxيعني 16 بكسل ثابتة. هذا مفيد عندما تريد تحكمًا دقيقًا في العرض، لكنه قد يسبب مشاكل في التوافق مع الشاشات المختلفة أو إعدادات المستخدم. - الوحدات النسبية (
emوrem): تعتمد على حجم خط العنصر الأب (em) أو حجم الخط الأساسي للصفحة (rem)، مما يجعل التصميم أكثر مرونة واستجابة. على سبيل المثال،1.1remيعني 110% من حجم الخط الأساسي.
أمثلة عملية:
h1 {
font-size: 36px; /* حجم ثابت */
}
p {
font-size: 1.1rem; /* حجم نسبي بالنسبة لحجم الخط الأساسي */
}
لماذا نستخدم em وrem؟
- يساعدان في جعل النص قابلًا للتكيف مع إعدادات المستخدم مثل تكبير الخط.
- يسهلان تصميم مواقع متجاوبة تعمل بشكل جيد على مختلف الأجهزة والشاشات.
- باستخدام
remيمكنك التحكم بحجم الخط الأساسي لموقعك من مكان واحد فقط.
rem لتحديد أحجام الخطوط العامة، وem للتحكم في أحجام العناصر الداخلية نسبيًا داخل مكون معين.
3. خاصية font-weight - وزن الخط
تُستخدم خاصية font-weight للتحكم في سمك الخط وجعل النص أكثر ثقلاً أو خفة، مما يؤثر على وضوح النص وأسلوب العرض.
يمكن تحديد وزن الخط باستخدام كلمات مفتاحية أو قيم رقمية:
normal(عادةً تساوي 400): وزن الخط الافتراضي.bold(عادةً تساوي 700): خط عريض.- قيم رقمية من
100إلى900بزيادة 100، حيث100يعني خط رفيع جداً، و900يعني خط ثقيل جداً.
مثال عملي:
p.normal {
font-weight: normal; /* وزن عادي */
}
strong, b {
font-weight: bold; /* عريض */
}
h1 {
font-weight: 900; /* ثقيل جدًا */
}
h6 {
font-weight: 100; /* خفيف جدًا */
}
ملاحظة: بعض الخطوط لا تدعم كل أوزان الخطوط، لذلك قد يتراجع المتصفح إلى أقرب وزن متاح.
4. خاصية font-style - نمط الخط
تُستخدم خاصية font-style لتحديد نمط الخط، وتسمح لك بجعل الخط يظهر بشكل مائل أو عادي.
تدعم هذه الخاصية القيم التالية:
normal: الخط الافتراضي غير المائل.italic: يجعل الخط مائلاً، وهو شائع في التأكيد أو الاقتباسات.oblique: خط مائل أيضاً، لكنه أحيانًا يظهر بميلان أقل منitalic، ويعتمد على دعم الخط نفسه.
مثال عملي:
p.normal {
font-style: normal; /* خط عادي */
}
em {
font-style: italic; /* خط مائل */
}
blockquote {
font-style: oblique; /* خط مائل بشكل مختلف */
}
ملاحظة: استخدام em أو i في HTML غالبًا ما يكون مرتبطًا بتطبيق نمط italic.
5. خاصية line-height - ارتفاع السطر
تُستخدم خاصية line-height للتحكم في المسافة الرأسية بين أسطر النص داخل العنصر، وهي من العوامل الأساسية التي تؤثر على سهولة القراءة وجمالية المظهر العام للنصوص.
زيادة ارتفاع السطر تساعد على تقليل تكدس الحروف، مما يجعل المحتوى أكثر وضوحًا وراحة للعين.
أنواع القيم الممكنة لـ line-height:
- قيمة عددية (مثل
1.6): تعني مضاعفة حجم الخط الحالي، وتعتبر أكثر استخدامًا لأنها مرنة ومتوافقة مع أحجام الخطوط المختلفة. - قيم وحدات الطول (مثل
24px): تحدد ارتفاع السطر بقيمة ثابتة ومستقلة عن حجم الخط. - نسبة مئوية (مثل
150%): تعني نسبة مئوية من حجم الخط الحالي. - كلمة مفتاحية (
normal): القيمة الافتراضية التي تختلف حسب الخط والمتصفح، وغالبًا تكون بين 1.0 و1.2.
مثال عملي:
p {
font-size: 16px;
line-height: 1.6; /* مسافة مريحة بين الأسطر */
}
h1 {
font-size: 36px;
line-height: 1.2; /* ارتفاع أقل مع العناوين */
}
1.4 إلى 1.8 للحصول على أفضل توازن بين الجمالية والوضوح، خاصة في الفقرات الطويلة.
6. خاصية text-align - محاذاة النص
تُستخدم خاصية text-align لتحديد كيفية محاذاة النص داخل العنصر، وهي تؤثر على اتجاه توزيع النص داخل الحاوية.
يمكنك استخدام عدة قيم رئيسية للتحكم في المحاذاة:
- left: محاذاة النص إلى اليسار (القيمة الافتراضية في اللغات التي تُكتب من اليسار إلى اليمين).
- right: محاذاة النص إلى اليمين (مفيدة للغات التي تُكتب من اليمين إلى اليسار مثل العربية).
- center: محاذاة النص في وسط العنصر.
- justify: توزيع النص بحيث يمتد على كامل عرض العنصر، مع تباعد متساوٍ بين الكلمات.
أمثلة عملية:
p.left {
text-align: left;
}
p.right {
text-align: right;
}
p.center {
text-align: center;
}
p.justify {
text-align: justify;
}
justify، قد تظهر فراغات غير متساوية بين الكلمات في بعض الأحيان، لذا تأكد من تجربة المظهر على مختلف الشاشات.
بالنسبة للنصوص العربية، عادةً ما تكون المحاذاة إلى اليمين هي الأنسب.
7. تحميل خطوط خارجية باستخدام Google Fonts
تُعد خدمة Google Fonts من أفضل المصادر المجانية لتحميل خطوط ويب جميلة ومتنوعة بسهولة، مما يمنح موقعك مظهرًا احترافيًا وجذابًا.
لاستخدام خط من Google Fonts، يمكنك ربط ملف الخط في قسم <head> من صفحة الـ HTML الخاصة بك كما يلي:
<link href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" rel="stylesheet">
بعدها يمكنك استدعاء الخط داخل ملف CSS الخاص بك باستخدام خاصية font-family:
body {
font-family: 'Cairo', sans-serif;
}
نصائح مهمة:
- اختر دومًا نسخ الخطوط المناسبة لحجم الموقع وأسلوب التصميم، حيث توفر Google Fonts نسخًا بخيارات وزن مختلفة (مثل Regular، Bold، Light) يمكنك تحميلها حسب حاجتك.
- يفضل تحميل الخطوط التي تستخدمها فقط لتقليل حجم تحميل الصفحة وتسريع ظهور الموقع.
- يمكنك أيضًا تضمين الخطوط مباشرة في CSS باستخدام
@import، لكن الربط داخل<head>أكثر كفاءة وأسرع في التحميل. - لا تنسى إضافة خط بديل (Fallback font) في حال لم يتم تحميل الخط الخارجي لأي سبب.