CSS

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

سنتعلم في هذا الدرس كيفية التحكم في شكل النصوص وتجعلها أكثر اهميه أو خطوط غير هامة  عن طريق خاصية  font-style لي لغة CSS.

التاريخ

23 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2868

المواضيع

24
الشروحات chevron_left CSS Font Style chevron_left CSS

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

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

تستخدم خاصية font-style للتحكم في ميل الخطوط في لغة CSS وتستخدم مع هذة الخاصية عدة قيم.


قيم خاصية font-style:

  • normal إستخدام هذة القيمة مع خاصية font-style يُعرض الخط بوضعة الطبيعي.
  • italic إستخدام هذة القيمة مع خاصية font-style يُعرض الخط مائل.
  • oblique إستخدام هذة القيمة مع خاصية font-style يُعرض الخط مائل بسيط.
CSS font style sytax

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

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

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

تستخدم خاصية font-weight في لغة CSS للتحكم في أهمية ووضوح الخط للعناصر التي تحتوي علي نصوص في صفحة الويب.


قيم خاصية font-weight:

  • خاصة font-weight مع القيمة normal تُعرض الخط بوضعة الطبيعي
  • خاصة font-weight مع القيمة bold تُعرض الخط أكثر أهمية ويكون الخط أعرض من الطبيعي.
  • خاصة font-weight مع القيمة lighter تُعرض الخط بطريقة مختلفة قليلاً عن الحجم الطبيعي.
  • خاصة font-weight مع القيمة رقم تُعرض الخط بطريقة مختلفة قليلاً عن قيمة bold.
CSS Font Weight

خاصية CSS font-weight تجعل الخط عريضاً.

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

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

تستخدم خاصية font-variant في لغة CSS لتصغير الخط العناصر في صفحة الويب بإستثناء أول حرف.


قيم خاصية font-variant:

  • normal تستخدم هذه القيمة لتُعرض الخط بالوضع الطبيعي.
  • small-caps تستخدم هذه القيمة لتُعرض الخط بطريقة مُختلفة في شكلة وتكبير أول حرف.
CSS Font Variant

تغيرر شكل الخط وتكبير أول حرف بأستخدام خاصية font-variant في لغة CSS.

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات