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

خطوط الويب في CSS

تعرف بالفعل font-family والحجم والوزن. خطوط الويب تحمّل حرفًا غير موجود بالضرورة على جهاز الزائر — أعلنه بـ @font-face ثم استخدم اسم العائلة كأي خط آخر، مع إنهاء هادئ باحتياطي.

أجزاء @font-face

📊 @font-face بنظرة واحدة

الجزء دوره اليومي
font-family الاسم الذي تخترعه ثم تستخدمه في CSS
src أين تعيش ملفات الخط (url(...) وغالبًا format(...))
font-weight / font-style أي وجه يمثله هذا الملف (regular، bold، italic…)
font-display كيف يتصرف النص أثناء تحميل الخط (مثل swap)

فكّر بخطوتين هادئتين: سجّل الوجه بـ @font-face، ثم استدعِ نفس اسم العائلة في قواعدك العادية. تخطي أي خطوة يترك مكدسًا لا يجد الملف المخصص.

@font-face بسيط

أعطِ الوجه اسمًا واضحًا ووجّه src إلى ملف خط على موقعك (أو CDN).

@font-face أساسي

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}

قدّم أكثر من تنسيق

المتصفحات الحديثة تفضّل woff2. سرد woff بعده يغطي متصفحات أقدم. ضع أفضل تنسيق أولًا.

woff2 ثم woff

css
CSS Code 
@font-face {
font-family: "Site Sans";
src:
url("/fonts/site-sans.woff2") format("woff2"),
url("/fonts/site-sans.woff") format("woff");
font-weight: 400;
font-style: normal;
}

font-display — أظهر النص أسرع

font-display: swap يدع المتصفح يعرض نصًا احتياطيًا أولًا ثم يستبدل خط الويب عند وصوله — غالبًا أفضل من فجوة طويلة غير مرئية.

Display swap

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}

استخدم العائلة التي أعلنتها

بعد @font-face، استدعِ نفس اسم font-family في قواعدك — وأبقِ احتياطيًا عامًا.

تطبيق العائلة المخصصة

css
CSS Code 
body {
font-family: "Site Sans", system-ui, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.6;
}

عادة هادئة للاستضافة الذاتية

استضف الأوزان التي تحتاجها فقط، فضّل woff2، اضبط font-display، ودائمًا أبقِ مكدس نظام/عام.

عنوان بوجه bold محمّل

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}

h1 {
font-family: "Site Sans", Georgia, serif;
font-weight: 700;
}

جرّب بنفسك

  1. اكتب كتلة @font-face باسم font-family مخصص وsrc من نوع woff2.
  2. أضف سطر src ثاني لـ woff.
  3. اضبط font-display: swap.
  4. طبّق "Your Name", sans-serif على body.
  5. إن كان لديك ملف bold، أضف @font-face منفصلًا للوزن 700 — ثم استخدم font-weight: 700 على عنوان.

أخطاء شائعة

  • إعلان @font-face دون استخدام نفس اسم العائلة في font-family
  • تخطي مكدس الاحتياطي (مظهر مكسور إن فشل الملف)
  • تحميل أوزان وأنماط كثيرة لا تستخدمها (صفحات بطيئة)
  • ترك النص غير مرئي طويلًا بلا استراتيجية font-display
  • خلط هذا الدرس مع text-shadow / التأثيرات (تأتي تاليًا)

ملخص

  • @font-face يسجّل اسم عائلة مخصصة ويشير إلى ملفات الخط
  • فضّل woff2، واختياريًا احتط بـ woff
  • font-display: swap غالبًا يبقي النص مقروءًا أثناء التحميل
  • استخدم نفس اسم العائلة في CSS مع احتياطي نظام/عام
  • حمّل الوجوه التي تحتاجها فقط؛ تأثيرات مثل text-shadow درس لاحق

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

جاهز للبدء

اختبر معرفتك

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

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

📝 التعليمات

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