انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 22
دورة لغة CSS

أشكال الخطوط في لغة CSSCSS Font Style

ستتعلم تغيير نمط الخط باستخدام font-style ووزنه باستخدام font-weight، وفهم عرض الحروف الصغيرة بقيمة small-caps دون تغيير معنى أهمية النص.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
3
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
5,420
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

CSS Font Style خاصية font-style في لغة CSS

تحدد font-style نمط الخط:

  • normal: النمط العادي.
  • italic: وجه مائل مصمم للخط إن توفر.
  • oblique: وجه مائل من نوع oblique أو محاكاة إمالة بحسب الخط والمتصفح. لا تعني بالضرورة ميلًا بسيطًا؛ يمكن طلب زاوية مثل oblique 20deg.

إذا لم يتوفر الوجه المطلوب، يختار المتصفح بديلًا وفق قواعد مطابقة الخطوط وقد يصنع الميل، لذلك قد تتشابه نتيجتا italic وoblique في بعض الخطوط.

خاصية font-style في لغة CSS

CSS font style sytax

كتابة خاصية font-style في لغة CSS

HTML 
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
جرّب بنفسك

CSS Font Weight خاصية font-weight في لغة CSS

تحدد font-weight وزن الخط في العرض؛ لا تمنح النص معنى الأهمية وحدها.

  • normal يساوي 400.
  • bold يساوي 700.
  • lighter وbolder تطلبان وزنًا أخف أو أثقل نسبة إلى وزن الأب وفق قواعد الاختيار.
  • يمكن طلب رقم من 1 إلى 1000؛ تتوقف الأوزان المرئية المتاحة على الخط وملفاته، وتدعم بعض الخطوط المتغيرة نطاقًا متصلًا.

قد يختار المتصفح أقرب وجه متاح أو يحاكي الوزن. ظهور رقم مختلف في القيمة المحسوبة لا يثبت وحده تحميل وجه خط مختلف.

CSS Font Weight

يقارن المثال الوزن العادي ووزنًا أخف والوزن العريض وطلب الوزن 900. ليست كل قيم font-weight مرادفة للخط العريض.

HTML 
p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}
جرّب بنفسك

CSS Font Variant خاصية font-variant في لغة CSS

يوضح المثال إحدى قيم font-variant: القيمة normal تحفظ العرض العادي، وsmall-caps تعرض الحروف الصغيرة بأشكال حروف كبيرة ذات حجم أصغر. تبقى الأحرف الكبيرة الأصلية بأشكالها الأكبر؛ لا تقتصر العملية على أول حرف من النص.

يعتمد توفر الأشكال على الخط، وقد يحاكيها المتصفح. لا توجد في العربية مقابلة أحرف كبيرة وصغيرة مثل الإنجليزية، لذلك لا يطبق هذا التحويل عليها بالطريقة نفسها.

CSS Font Variant

قارن النص نفسه في الوضع العادي ومع small-caps، ولاحظ أشكال الحروف الصغيرة والكبيرة الأصلية.

HTML 
p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات11

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 11 مفهومةأول بطاقة، أول خطوة
01 Style نمط أو شكل
للمراجعة
02 Font الخط
للمراجعة
03 Property خاصية
للمراجعة
04 Value قيمة
للمراجعة
05 Normal عادي
للمراجعة
06 Italic مائل
للمراجعة
07 Oblique منحرف قليلاً
للمراجعة
08 Weight وزن
للمراجعة
09 Variant البديل
للمراجعة
10 Bold عريض
للمراجعة
11 Transform التحول
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات1

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 1 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

2أسئلة 1أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي2 أسئلة تنتظرك
01

في ماذا تستخدم الخاصية font-style ؟

02

في ماذا تستخدم الخاصية font-weight ؟