جاري التحميل...

الخطوط في CSS

أنت تعرف بالفعل كيف يجلس النص على السطر. الخطوط تختار أي حروف تراها — عائلة الحرف، حجمها، سماكتها، وهل تميل italic أم لا. تحميل خطوط الويب المخصصة في الدرس التالي؛ هنا تتقن خصائص الخط الأساسية.

أدوات الخط بنظرة واحدة

📊 خصائص الخط الشائعة

الخاصية دورها اليومي
font-family تسمّي مكدس الحروف (مع احتياطي عام)
font-size تضبط حجم النص
font-weight تضبط سماكة النص (مثل 400، 700، bold)
font-style تضبط normal أو italic (وأنماطًا ذات صلة)
font (اختصار) يجمع النمط والوزن والحجم والعائلة في تصريح واحد

مكدسات font-family

اذكر الخطوط المفضّلة أولًا، ثم بدائل أأمن، وأنهِ بـ عائلة عامة مثل sans-serif أو serif ليُرسم شيء دائمًا.

مكدس sans-serif مقروء

css
CSS Code 
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

حجم الخط

font-size يضبط حجم النص. الوحدات النسبية مثل rem غالبًا تتناسب بهدوء مع الصفحة؛ px والكلمات المفتاحية مثل large تعمل أيضًا.

أحجام العنوان والمتن

css
CSS Code 
h1 {
font-size: 2rem;
}

p {
font-size: 1rem;
}

وزن الخط

font-weight يتحكم في السماكة. الأوزان الرقمية (400، 700) أو الكلمات المفتاحية (normal، bold) شائعة. يجب أن يدعم الوجه الوزن الذي تطلبه.

تأكيد بالوزن

css
CSS Code 
.lead {
font-weight: 700;
}

.caption {
font-weight: 400;
}

نمط الخط — italic

font-style: italic يميل النص حين يتوفر وجه مائل. استخدمه للاقتباسات أو التأكيد الخفيف، لا لكل فقرة.

اقتباس مائل

css
CSS Code 
blockquote {
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
}

اختصار font

اختصار font يمكنه ضبط النمط والوزن والحجم والعائلة معًا. الحجم والعائلة مطلوبان في الشكل الذي تتوقعه معظم المتصفحات.

اختصار font على عنوان بطاقة

css
CSS Code 
.card-title {
font: italic 700 1.25rem Georgia, "Times New Roman", serif;
}

عادة هادئة للمتن

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

أساس خط الصفحة

css
CSS Code 
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}

h2 {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.5rem;
font-weight: 700;
}

جرّب بنفسك

  1. اضبط body على مكدس sans-serif ينتهي بـ sans-serif.
  2. أعطِ h1 حجمًا أكبر وfont-weight: 700.
  3. نسّق blockquote بـ font-style: italic ومكدس serif.
  4. أعد كتابة عنوان باختصار font.
  5. قارن نفس الفقرة في serif وsans-serif — لاحظ تغيّر المزاج.

أخطاء شائعة

  • تسمية خط فاخر واحد بلا احتياطي (مظهر مكسور إن غاب الوجه)
  • تعيين أحجام px هائلة في كل مكان بلا تفكير نسبي
  • طلب font-weight: 900 حين يوفّر الوجه فقط regular وbold
  • القفز إلى @font-face / خطوط ويب مستضافة هنا (الدرس التالي)
  • استخدام text-align أو text-decoration بينما قصدك font-family أو font-weight

ملخص

  • font-family يسرد مكدسًا ويجب أن ينتهي بعائلة عامة
  • font-size يضبط الحجم؛ الوحدات النسبية غالبًا تتناسب بهدوء
  • font-weight وfont-style يضيفان تأكيدًا سميكًا ومائلًا
  • اختصار font يجمع النمط والوزن والحجم والعائلة
  • أبقِ مكدس المتن واضحًا؛ حمّل خطوط الويب المخصصة في الدرس التالي

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
7
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 27 من 35
Css درس تعليمي