🎨 تنسيق الخطوط في CSS: كيف تجعل نصوص موقعك جميلة وجذابة؟ ✨

مرحباً بك في عالم تنسيق النصوص! هل لاحظت كيف تختلف الخطوط من موقع لآخر؟ بعضها أنيق، وبعضها رسمي، والآخر مرح. هذا الاختلاف هو ما يعطي كل موقع شخصيته الفريدة. في درس اليوم، سنتعلم كيف نتحكم في الخطوط باستخدام CSS لنجعل نصوص موقعنا تبدو بالشكل الذي نريده. هيا بنا نبدأ! 🚀

ما هي خصائص الخطوط الأساسية في CSS؟ 🤔

في CSS، لدينا مجموعة من الخصائص المخصصة للتحكم في مظهر النص. هذه الخصائص تسمح لنا بتحديد نوع الخط، حجمه، سماكته، وأسلوبه. دعنا نتعرف على أهمها:

  1. font-family: لتحديد عائلة الخط (مثل Arial, Times New Roman).
  2. font-size: لتحديد حجم الخط.
  3. font-weight: للتحكم في سماكة الخط (عادي، غامق).
  4. font-style: لتحديد نمط الخط (مائل، عادي).

أولاً: اختيار الخط باستخدام font-family 🏷️

الخاصية font-family هي أهم خاصية، فهي تحدد عائلة الخط التي سيظهر بها النص. نكتب أسماء الخطوط التي نريد استخدامها، مفصولة بفواصل.

القاعدة الذهبية: نضع دائماً خطوطاً احتياطية (Fallback Fonts). لماذا؟ لأن الخط الذي تختاره قد لا يكون مثبتاً على جهاز الزائر! لذلك نكتب قائمة بالخطوط بالترتيب: الخط المفضل أولاً، ثم الخطوط البديلة.

p {
  font-family: "Arial", "Helvetica", sans-serif;
}

شرح المثال: هنا نقول للمتصفح: "اعرض النص داخل عناصر <p> بخط Arial. إذا لم يكن Arial متوفراً، استخدم Helvetica. وإذا لم يكن أي منهما متوفراً، استخدم أي خط بدون زوائد (sans-serif) موجود في النظام."

💡 ملاحظة مهمة: إذا كان اسم الخط مكوناً من أكثر من كلمة (مثل Times New Roman)، يجب وضعه بين علامتي اقتباس " ".

ثانياً: ضبط حجم الخط باستخدام font-size 📏

تحدد خاصية font-size مدى كبر أو صغر النص. يمكننا تعيينها بوحدات مختلفة، ولكن الأكثر شيوعاً للمبتدئين هي البكسل px.

h1 {
  font-size: 32px; /* حجم كبير للعناوين الرئيسية */
}

p {
  font-size: 16px; /* حجم قياسي للفقرات */
}

.small-text {
  font-size: 12px; /* حجم صغير للنصوص الثانوية */
}

ثالثاً: التحكم في السماكة مع font-weight ⚖️

تتحكم خاصية font-weight في سماكة الخط. القيم الأكثر استخداماً هي:

  • normal: السماكة العادية (هي القيمة الافتراضية).
  • bold: خط غامق.
.title {
  font-weight: bold; /* يجعل النص غامقاً */
}

.normal-text {
  font-weight: normal; /* يعيد النص إلى السماكة العادية */
}

رابعاً: إضافة النمط المائل بـ font-style 🔀

تستخدم font-style لجعل الخط مائلاً. قيمتها الأساسية هي italic.

.quote {
  font-style: italic; /* يجعل النص مائلاً، مناسباً للاقتباسات */
}

.normal {
  font-style: normal; /* يلغي النمط المائل */
}

مثال شامل: تطبيق كل الخصائص معاً 🧩

لنطبق كل ما تعلمناه على مثال واحد. سننشئ فقرة نصية جميلة.

<!-- ملف HTML -->
<p class="special-paragraph">هذه فقرة نصية بتنسيق خط مخصص باستخدام CSS.</p>

/* ملف CSS */
.special-paragraph {
  font-family: "Georgia", "Times New Roman", serif; /* خط كلاسيكي */
  font-size: 18px; /* حجم مريح للقراءة */
  font-weight: bold; /* نص غامق */
  font-style: italic; /* نص مائل */
}

النتيجة: ستظهر الفقرة بخط Georgia الغامق والمائل بحجم 18 بكسل. إذا لم يكن Georgia موجوداً، سيتم استخدام Times New Roman.

ما هي الخطوط الآمنة للويب (Web Safe Fonts)؟ 🛡️

هي مجموعة من الخطوط المتوفرة بشكل شبه مؤكد على جميع أنظمة التشغيل (Windows, Mac, Linux). استخدامها يضمن أن يرى معظم الزوار التصميم كما خططت له. إليك بعض الأمثلة الشهيرة:

  • خطوط بدون زوائد (Sans-serif): Arial, Helvetica, Verdana.
  • خطوط بزوائد (Serif): Times New Roman, Georgia.
  • خطوط ثابتة العرض (Monospace): Courier New.

💡 نصيحة للمبتدئ: ابدأ دائماً بقائمة خطوط آمنة كخطوط احتياطية في خاصية font-family لضمان أفضل توافق.