النصوص (Typography) في CSS: تنسيق النصوص والمحاذاة

بواسطة /

المقدمة

تلعب Typography (تنسيق النصوص) دورًا محوريًا في تصميم مواقع الويب، حيث يساعد التنسيق الجيد للنصوص على تحسين تجربة المستخدم وزيادة سهولة القراءة. يتيح CSS مجموعة متنوعة من الخصائص التي تمكنك من التحكم في شكل النصوص ومحاذاتها بطريقة احترافية.

في هذا الدرس، سنتعرف على كيفية تخصيص النصوص باستخدام:

  • font-family لاختيار الخطوط.
  • font-size لتحديد حجم النص.
  • font-weight للتحكم في سماكة النص.
  • font-style لإضافة تنسيقات مثل النص المائل.
    كما سنتعرف على خصائص المحاذاة، مثل text-align وline-height لتحسين تجربة القراءة.

أولًا: تنسيق النصوص باستخدام CSS

1. font-family: تحديد نوع الخط

  • font-family تحدد نوع الخط المستخدم في النصوص.
  • يمكن تضمين عدة خطوط احتياطية (Fallback) في حال لم يكن الخط الأساسي متوفرًا على جهاز المستخدم.

مثال:

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

شرح:

  • إذا كان الخط Arial غير متاح، يتم استخدام Helvetica، وإذا لم يكن متاحًا يتم اختيار خط sans-serif الافتراضي.

أفضل الممارسات:

  • استخدم الخطوط التي تدعم اللغة التي تكتب بها (مثل Cairo أو Tajawal للعربية).
  • يمكنك أيضًا استخدام Google Fonts لإضافة خطوط مخصصة.

2. font-size: تحديد حجم النص

  • font-size تحدد حجم النص باستخدام وحدات مثل:
  • px: بكسل (ثابت).
  • em و rem: نسبة مئوية بناءً على حجم الخط الأساسي.
  • %: نسبة من حجم النص الأصلي.

مثال:

h1 {
  font-size: 36px;
}
p {
  font-size: 16px;
}

شرح:

  • في هذا المثال، يتم تعيين حجم النصوص بشكل ثابت: 36px للعناوين و16px للفقرات.

3. font-weight: تحديد سماكة النص

  • font-weight تتحكم في سماكة النص. يمكن تعيين القيم:
  • normal (افتراضي).
  • bold (غامق).
  • أرقام من 100 إلى 900 للتحكم في درجات السماكة (كلما زاد الرقم، زادت السماكة).

مثال:

h1 {
  font-weight: 700;
}
p {
  font-weight: normal;
}

4. font-style: تحديد شكل النص (مائل)

  • font-style تستخدم لإضافة نص مائل أو إلغاء النص المائل:
  • normal: النص عادي.
  • italic: النص مائل.

مثال:

em {
  font-style: italic;
}

HTML:

<p>هذا <em>النص</em> سيكون مائلًا.</p>

ثانيًا: تنسيق المحاذاة باستخدام CSS

1. text-align: محاذاة النص

  • text-align تتحكم في محاذاة النص داخل العنصر.
  • القيم المتاحة:
  • left: محاذاة لليسار (افتراضية).
  • right: محاذاة لليمين.
  • center: محاذاة في المنتصف.
  • justify: محاذاة النص بحيث تكون كل الأسطر بنفس الطول.

مثال:

p {
  text-align: justify;
}

شرح:

  • في هذا المثال، يتم محاذاة النص بحيث يتم توزيع الكلمات على السطر بالكامل، مما يعطي مظهرًا مرتبًا.

2. line-height: ضبط ارتفاع الأسطر

  • line-height تحدد المسافة بين الأسطر داخل الفقرة.
  • يمكن استخدام قيم نسبية (مثل 1.5) أو قيم ثابتة (px).

مثال:

p {
  line-height: 1.6;
}

شرح:

  • يتم ضبط المسافة بين الأسطر بحيث تكون أكثر راحة للقراءة.

تطبيق عملي: تنسيق النصوص باستخدام CSS

الكود الكامل:

ملف HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>تنسيق النصوص في CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>مرحبًا بكم في درس Typography</h1>
    <p>النصوص تلعب دورًا مهمًا في تصميم المواقع وتساهم في تحسين تجربة المستخدم.</p>
    <p class="highlight">هذا النص مميز بخط عريض وبلون مختلف.</p>
  </div>
</body>
</html>

ملف CSS (styles.css):

/* تنسيق عام */
body {
  font-family: "Arial", sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 20px;
}

/* تنسيق العناوين */
h1 {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

/* تنسيق الفقرات */
p {
  font-size: 18px;
  line-height: 1.8;
  color: #555;
  text-align: justify;
  margin-bottom: 15px;
}

/* تنسيق الفقرة المميزة */
.highlight {
  font-weight: bold;
  color: #ff5733;
  text-align: right;
}

خاتمة

في هذا الدرس، تعلمنا كيفية تنسيق النصوص باستخدام CSS عبر التحكم في:

  • نوع الخط (font-family) واختيار خطوط احتياطية.
  • حجم النص (font-size) لتحسين القراءة.
  • سماكة النص (font-weight) لإبراز العناصر المهمة.
  • شكل النص (font-style) لإضافة تنسيقات مثل النص المائل.

كما غطينا خصائص المحاذاة مثل:

  • text-align لمحاذاة النصوص.
  • line-height لضبط المسافات بين الأسطر.

من خلال هذه الخصائص، يمكنك تحسين جودة النصوص في صفحات الويب وجعلها أكثر وضوحًا وتنظيمًا.

أسئلة شائعة (FAQ)

1. ما الفرق بين em و rem في CSS؟

  • em يعتمد على حجم الخط الخاص بالعنصر الأب.
  • rem يعتمد على حجم الخط الجذري (root)، وهو عادة حجم النص في <html>.

2. متى يُفضل استخدام text-align: justify؟

  • يُستخدم في الفقرات الطويلة لضمان توزيع الكلمات بالتساوي على السطر.

3. كيف يمكنني استيراد خط من Google Fonts؟

  • يمكنك إضافة الكود التالي في <head>:
  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">

ثم استخدمه في CSS:

  body {
    font-family: 'Cairo', sans-serif;
  }

هل أنت مستعد للانتقال إلى الدرس التالي؟ 😊

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Scroll to Top
Verified by MonsterInsights