التحكم في سُمك الخط (font-weight)

في هذا الدرس سنتعلم كيفية التحكم في "سُمك" أو "وزن" الخط. تخيل أنك تكتب بقلم رصاص؛ يمكنك الكتابة بخط خفيف جداً، أو الضغط على القلم ليصبح الخط عريضاً وواضحاً، أو استخدام قلم تخطيط (Marker) ليكون الخط سميكاً جداً. في CSS، الخاصية المسؤولة عن هذا الأمر تسمى font-weight. هي التي تجعل العناوين بارزة والنصوص العادية خفيفة ومريحة للقراءة.

1. الطريقة السهلة: الكلمات (normal و bold)

كمبتدئ، ستحتاج في 90% من الحالات إلى قيمتين فقط: "خط عادي" و "خط عريض". لغة CSS توفر كلمات سهلة جداً لهذا الغرض.

القيم الأساسية

normal (عادي): هذا هو الشكل الافتراضي للنص. إذا لم تكتب شيئاً، سيظهر الخط بهذا الشكل. نستخدمه للفقرات والنصوص الطويلة.
bold (عريض): يجعل الخط سميكاً وواضحاً. نستخدمه للعناوين أو لتمييز كلمة مهمة وسط السطر.

مثال (1): استخدام الكلمات المباشرة


/* جعل جميع الفقرات بخط عادي */
p {
    font-weight: normal; 
}

/* جعل العناوين بخط عريض */
h1 {
    font-weight: bold;
}

/* جعل كلاس معين بخط عريض */
.important-text {
    font-weight: bold;
}

2. الطريقة الدقيقة: الأرقام (من 100 إلى 900)

أحياناً كلمة bold لا تكفي. قد تريد خطاً سميكاً جداً (Heavy)، أو خطاً رفيعاً جداً (Thin). هنا نستخدم الأرقام.

الأرقام تبدأ من 100 (أنحف شيء) وتنتهي بـ 900 (أسمك شيء).

أهم رقمين يجب حفظهما

400: تعني خط عادي (تساوي normal).
700: تعني خط عريض (تساوي bold).

معلومة هامة: لكي تعمل الأرقام (مثل 100 أو 900) بشكل صحيح، يجب أن يكون "نوع الخط" الذي تستخدمه يدعم هذه الأوزان. (خطوط جوجل مثلاً توفر لك هذه الخيارات).

3. أمثلة عملية كثيرة (أكواد جاهزة)

إليك مجموعة من الأمثلة لتدرجات مختلفة في سُمك الخط، يمكنك نسخها وتجربتها.

مثال (2): تدرجات الأوزان بالأرقام


/* 1. خط رفيع جداً (Thin) */
.thin-text {
    font-weight: 100;
}

/* 2. خط خفيف (Light) - ممتاز للنصوص الفرعية */
.light-text {
    font-weight: 300;
}

/* 3. خط عادي (Normal) - مثل القيمة 400 */
.regular-text {
    font-weight: normal; /* أو تكتب 400 */
}

/* 4. خط متوسط السماكة (Medium) */
.medium-text {
    font-weight: 500;
}

/* 5. خط عريض (Bold) - مثل القيمة 700 */
.bold-text {
    font-weight: bold; /* أو تكتب 700 */
}

/* 6. خط سميك جداً (Black/Heavy) - للعناوين الضخمة */
.heavy-text {
    font-weight: 900;
}

اختر - إذا أردت كتابة نص بوزن "عادي" باستخدام الأرقام، ماذا تكتب؟
(أ) font-weight: 100. (ب) font-weight: 400. (ج) font-weight: 700. (د) font-weight: 900.

الإجابة: (ب) font-weight: 400. (لأن 400 هي الرقم المرادف لـ normal).

جدول المقارنة الشامل

هذا الجدول يلخص لك كل شيء ليكون مرجعاً سريعاً أمامك.

القيمة (الرقم)	الاسم (الوصف)	متى نستخدمه؟
100	Thin (نحيل)	للتصاميم العصرية جداً والعناوين الكبيرة الرقيقة.
300	Light (خفيف)	للنصوص الهامشية أو الوصف البسيط.
400	Normal (عادي)	الخيار الأساسي لأي نص تقرأه (مثل هذا النص).
500	Medium (متوسط)	عندما تريد الخط أسمك قليلاً من العادي لكن ليس عريضاً.
700	Bold (عريض)	للعناوين الرئيسية، الأزرار، والكلمات المهمة.
900	Black (ضخم)	للعناوين الضخمة جداً لجذب الانتباه بقوة.

التحكم في سمك الخط Css