التحكم في مظهر النصوص باستخدام خصائص الخط في CSS - العدد #34

1. خاصية font-weight: التحكم في وزن الخط

تُستخدم خاصية font-weight لتحديد مدى "سُمك" الخط، وتقبل القيم من 100 إلى 900، بزيادة قدرها 100 في كل مرة.

• القيمة 400 تعادل normal.
• القيمة 700 تعادل bold.

لكن من المهم أن تعرف أن ليست كل الخطوط تدعم جميع الأوزان. بعض الخطوط قد لا يظهر فيها فرق بين 300 و500 مثلًا، لأنها لا تحتوي على أنماط متعددة.

2. خاصية font-style: لتغيير شكل الخط

تُستخدم font-style لتغيير شكل الخط من عادي (normal) إلى مائل (italic). وهي مفيدة لتمييز كلمات أو عبارات معينة داخل النص.

3. خاصية font: اختصار شامل

خاصية font هي خاصية مختصرة (shorthand) تتيح لك تحديد عدة خصائص متعلقة بالخط دفعة واحدة، مثل:\ font-style, font-weight, font-size, line-height, font-family.

مثال:

لكن يُنصح بعدم استخدامها كثيرًا، لأنها قد تُربك المطورين وتؤدي إلى فقدان بعض الخصائص إذا لم تُكتب بشكل دقيق.

4. خاصية letter-spacing: المسافة بين الحروف

تُستخدم letter-spacing لضبط المسافة بين الحروف.

• القيم الموجبة تزيد التباعد.
• القيم السالبة تقلله.

هذه الخاصية مفيدة جدًا في تحسين وضوح النصوص أو إعطاء طابع تصميمي معين.

5. خاصية line-height: المسافة بين الأسطر

تتحكم line-height في المسافة الرأسية بين أسطر النص. وهي ضرورية لتحسين قابلية القراءة، خاصة في الفقرات الطويلة.

من الأفضل استخدام قيمة بدون وحدة (مثل 1.5) بدلاً من px أو em.\ لماذا؟ لأن القيمة بدون وحدة تُضرب تلقائيًا في حجم الخط (font-size) وتتكيف معه تلقائيًا.

6. ملاحظة مهمة حول الصور والنصوص

إذا لاحظت وجود مسافة زائدة أسفل الصور داخل النص، فغالبًا ما يكون السبب هو الخط الأساسي للنص (baseline) الذي يترك مساحة لما يُعرف بـ"النازل" (descenders) في الحروف.

لحل هذه المشكلة، يمكنك:

• تعيين display: block للصورة.
• أو استخدام vertical-align: middle.

خلاصة

التحكم في خصائص الخطوط في CSS يمنحك القدرة على تحسين تجربة القراءة، وضبط مظهر النصوص بدقة، وجعل التصميم أكثر احترافية. من وزن الخط إلى المسافات بين الحروف والأسطر، كل تفصيلة تصنع فرقًا.