الخطوط تلعب دورًا كبيرًا في تحسين مظهر النصوص على صفحات الويب. في هذا الدرس سنتعرف على كيفية تغيير نوع الخط، حجمه، وزيادة التحكم في شكله باستخدام CSS.
1. تغيير نوع الخط
نستخدم الخاصية font-family لاختيار نوع الخط للنصوص.
مثال:
font-family: Arial, sans-serif;
ملاحظة: من الأفضل دائمًا كتابة أكثر من اسم خط، بحيث لو لم يتوفر الخط الأول على الجهاز، يستخدم المتصفح الخط الثاني.
2. تغيير حجم الخط
لتحديد حجم الخط نستخدم الخاصية font-size.
مثال:
font-size: 18px;
يمكن استخدام وحدات أخرى مثل:
px(بيكسل)em(نسبة لحجم الخط الأساسي)%(نسبة مئوية)
مثال باستخدام em:
font-size: 1.5em;
3. تغيير سمك الخط
باستخدام الخاصية font-weight يمكن جعل الخط أعرض أو أخف.
مثال:
font-weight: bold;
أو باستخدام قيم رقمية:
font-weight: 400; /* عادي */
font-weight: 700; /* عريض */
4. تغيير شكل الخط (مائل)
يمكن جعل الخط مائلًا باستخدام font-style.
مثال:
font-style: italic;
5. تغيير ارتفاع السطر (المسافة بين الأسطر)
نستخدم الخاصية line-height للتحكم في المسافة بين سطور النصوص.
مثال:
line-height: 1.6;
(كلما زادت القيمة، زادت المسافة بين الأسطر).
مثال عملي كامل
font-family: 'Verdana', sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
line-height: 1.5;
color: #333;
الواجب العملي
- صمّم فقرة نصية وجرب تغيير نوع الخط وحجمه وسمكه وشكله.
- جرّب تأثير زيادة الـ
line-heightعلى قراءة النصوص الطويلة. - استخدم خطوط مختلفة ولاحظ الفروقات في شكل التصميم العام.
