شرح text-transform في CSS — كيف تتحكم في حالة الأحرف ونمط ووزن الخط؟

أحياناً تريد أن تجعل النص الإنجليزي بحروف كبيرة أو صغيرة، أو تبرز كلمة بخط مائل أو عريض. في CSS يمكن فعل ذلك بسهولة بدون تعديل النص الأصلي داخل HTML.

هذا الدرس مهم لمن يبحث عن شرح text-transform في CSS أو الفرق بين font-style و font-weight أو كيفية تحويل الأحرف إلى uppercase في CSS.

ما هي text-transform في CSS؟

خاصية text-transform تتحكم في حالة الأحرف (Case) للنصوص التي تدعم الحروف الكبيرة والصغيرة، مثل الإنجليزية.

• uppercase: كل الأحرف كبيرة.
• lowercase: كل الأحرف صغيرة.
• capitalize: أول حرف من كل كلمة كبير.

ملاحظة مهمة: text-transform لا تؤثر على اللغة العربية لأن العربية لا تحتوي نظام uppercase/lowercase.

استخدام text-transform في CSS

.up {
    text-transform: uppercase;
}

.low {
    text-transform: lowercase;
}

.cap {
    text-transform: capitalize;
}

ماذا يفعل هذا الكود؟ يطبق 3 أنماط مختلفة على شكل الحروف الإنجليزية.

سطر بسطر:

• uppercase: كل النص بحروف كبيرة.
• lowercase: كل النص بحروف صغيرة.
• capitalize: بداية كل كلمة بحرف كبير.

النتيجة المتوقعة: تغيير الشكل البصري للنص بدون تغيير القيمة الأصلية في HTML.

خطأ شائع: توقع أن الخاصية تعمل على الكلمات العربية بنفس الطريقة.

ما هي font-style في CSS؟

خاصية font-style تضبط نمط الخط، وغالباً تُستخدم لإظهار النص مائلاً.

• normal: النمط الافتراضي.
• italic: خط مائل.

p.quote {
    font-style: italic;
}

ماذا يفعل هذا الكود؟ يجعل الفقرة ذات class quote مائلة، وهو مفيد للاقتباسات.

النتيجة المتوقعة: تمييز بصري فوري للنص المهم أو الاقتباس.

خطأ شائع: الإفراط في استخدام italic على نصوص طويلة، فيضعف القراءة.

ما هي font-weight في CSS؟

خاصية font-weight تتحكم في سماكة الخط.

• normal أو 400: سماكة عادية.
• bold أو 700: سماكة عريضة.
• قيم رقمية من 100 إلى 900 بحسب نوع الخط.

h2 {
    font-weight: 700;
}

small {
    font-weight: 300;
}

ماذا يفعل هذا الكود؟ يجعل العناوين عريضة والنصوص الصغيرة أخف سماكة.

النتيجة المتوقعة: هرم بصري واضح بين العناوين والنصوص الثانوية.

خطأ شائع: استخدام أوزان غير مدعومة في الخط الحالي فتبدو النتيجة بدون فرق حقيقي.

مثال عملي كامل في CSS

HTML:

<h2 class="title">web design basics</h2>
<p class="quote">good design is clear design</p>
<p class="note">important note</p>

CSS:

.title {
    text-transform: uppercase;
    font-weight: 700;
}

.quote {
    font-style: italic;
    text-transform: capitalize;
}

.note {
    font-weight: 300;
    text-transform: lowercase;
}

ماذا يفعل هذا المثال؟ يجمع بين حالة الأحرف ونمط ووزن الخط لخلق تسلسل بصري واضح.

النتيجة المتوقعة: عنوان بارز، اقتباس مائل، وملاحظة خفيفة بصرياً.

خطأ شائع: تطبيق كل التأثيرات على كل النصوص دفعة واحدة فيفقد التصميم التوازن.

أخطاء شائعة في text-transform و font-style و font-weight

١) استخدام uppercase على نصوص كثيرة جداً: يضعف القراءة في الفقرات الطويلة.

٢) الاعتماد على italic لكل النصوص المميزة: قد يرهق العين.

٣) أوزان غير متوفرة: بعض الخطوط لا تدعم كل القيم الرقمية.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

كيف أحول النص إلى uppercase في CSS؟

استخدم text-transform: uppercase; على العنصر المطلوب.

ما الفرق بين capitalize و uppercase في CSS؟

uppercase يحول كل الأحرف لكبيرة، بينما capitalize يحول أول حرف من كل كلمة فقط.

هل text-transform يعمل مع العربية؟

لا، تأثيره الأساسي على اللغات التي تحتوي upper/lower case مثل الإنجليزية.

كيف أجعل النص عريضاً في CSS؟

استخدم font-weight: bold; أو قيمة رقمية مثل 700.

متى أستخدم font-style: italic في CSS؟

للاقتباسات أو الملاحظات القصيرة، وليس للفقرات الطويلة.