توثيق تقني

الفصل 5: الخطوط (Fonts) في CSS

Written by

Eng~ Rabea Shaban

in

استخدام Google Fonts – font-family – font-size – line-height

🟣 يعني إيه font-family؟

الخاصية دي بتقول للمتصفح: “استخدم الخط الفلاني لكتابة الكلام”.

مثال بسيط:

cssCopy codebody {
  font-family: Arial, sans-serif;
}

📌 هنا بيقوله جرب خط Arial، ولو مش موجود استخدم أي خط من نوع sans-serif.

🟢 أنواع الخطوط الشائعة:

النوعشكله
Arialخط بسيط وواضح
Tahomaخط رسمي شوية
Times New Romanخط تقليدي شبه الجرائد
Courier Newشبه خطوط الكتابة على الآلة الكاتبة
sans-serifخطوط بدون حواف
serifخطوط بحواف (زي Times)

🔠 font-size – حجم الخط

تقدر تحدد حجم الخط بوحدات مختلفة:

cssCopy codep {
  font-size: 16px;
}

📏 أشهر الوحدات:

  • px: بيكسل – الحجم ثابت
  • em: نسبة لحجم العنصر الأب
  • rem: نسبة لحجم الجذر (html)
  • %: نسبة مئوية

مثال:

cssCopy codeh1 {
  font-size: 2em;
}

↕️ line-height – المسافة بين السطور

لما يكون فيه سطور كتير تحت بعض، تقدر تتحكم في المسافة بينهم بـ line-height.

cssCopy codep {
  line-height: 1.8;
}

كل ما الرقم زاد، كل ما المسافة كبرت.

🔤 إزاي نستخدم Google Fonts؟

  1. ادخل على: https://fonts.google.com
  2. اختار الخط اللي يعجبك (زي Cairo, Tajawal, Roboto, Poppins)
  3. دوس على زر “Select Style”
  4. انسخ رابط الخط، وحطه في <head> بتاع HTML:
htmlCopy code<link href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" rel="stylesheet">
  1. استخدم الخط في CSS:
cssCopy codebody {
  font-family: 'Cairo', sans-serif;
}

📌 مثال عملي:

htmlCopy code<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مثال على الخطوط</title>
  <link href="https://fonts.googleapis.com/css2?family=Tajawal&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Tajawal', sans-serif;
      font-size: 18px;
      line-height: 1.6;
      background-color: #f9f9f9;
      color: #333;
    }

    h1 {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1>أهلاً بيك في موقعنا</h1>
  <p>الخط المستخدم هنا من جوجل، وحجم الخط مضبوط، وكمان المسافة بين السطور مريحة للعين.</p>
</body>
</html>

🎯 نصايح سريعة:

  • متزودش في عدد الخطوط علشان متقلش الصفحة
  • دايمًا حط خط بديل زي sans-serif في الآخر
  • استخدم Google Fonts عشان تدّي شكل احترافي وسهل التغيير

Comments

اترك تعليقاً

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

More posts