albashmoparmeg.com

اتعلم البرمجة صح وبسهولة وباللغة العربية مع موقع الباشمبرمج

الكورس
Advertisements

الخطوط (Fonts) فى CSS

الخطوط (Fonts) فى CSS – سيعلمك هذا الفصل كيفية التحكم فى الخطوط؟ والتعرف على جميع خصائص الخطوط فى CSS.

 

خصائص الخطوط فى CSS

 

توفر لغة CSS مجموعة متنوعة من الخصائص للتحكم فى شكل الخطوط، وهم:

  1. font-family
  2. font-size
  3. font-stretch
  4. font-style
  5. font-variant
  6. font-weight
  7. font

 

 

1. خاصية Font Family

 

تحدد خاصية font-family قائمة بأسماء عائلة (أو نوع) خط واحد أو أكثر (يتم تحديد أكثر من font-family في قائمة مفصولة بفواصل ‘ , ‘)، كالتالى:

<style>
    h2 {
        font-family: "Lucida Console", Courier, monospace;
    }
    p {
        font-family: Tahoma;
    }
</style>

<h2>Font Family Example</h2>
<p>Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat.</p>

Font Family Example

Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat.

إذا كان اسم font-family أكثر من كلمة واحدة ، فيجب أن يكون بين علامتي اقتباس ” “، مثل ما هو موجود فى المثال السابق.

 

2. خاصية Font Size

 

تقوم خاصية Font-size بتعيين حجم الخط. يمكن أن تكون قيمة حجم الخط حجمًا مطلقًا absolute أو نسبيًا relative. كالتالى:

<style>
    p {
        font-size: 18px;
    }
</style>

<p>Lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat.</p>

Lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat.

 

الحجم المطلق absolute:

  • يضبط النص على حجم محدد.
  • الحجم المطلق مفيد عندما يكون الحجم الفعلي للناتج معروفًا.
  • لا يسمح للمستخدم بتغيير حجم النص في جميع المتصفحات (سيء لأسباب تتعلق بإمكانية الوصول Accessability).
  • مثل medium و small و large …إلخ.

 

الحجم النسبي relative:

  • يضبط الحجم بالنسبة للعناصر المحيطة.
  • يسمح للمستخدم بتغيير حجم النص في المتصفحات.
  • مثل smaller و larger. وإستخدام الأطوال بالـ px و em (توصى منظمة W3C بها) و rem، والأحجام المئوية.
  • لزيادة إمكانية الوصول إلى الحد الأقصى ، من الأفضل عمومًا استخدام القيم النسبية relative بحجم الخط الافتراضي للمستخدم.

 

للسماح للمستخدمين بتغيير حجم النص (في قائمة المتصفح) ، يستخدم العديد من المطورين em بدلاً من البكسل px، كالتالى

<style>
    p {
        font-size: 1.125em;  /* 18px ÷ 16 = 1.125em */
    }
</style>

<p>Libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat.</p>

Libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat.

 

الحجم الافتراضي للنص في المستعرضات هو 16 بكسل، لذا الحجم الافتراضي لـ 1em هو 16px.

يمكن حساب الحجم من px إلى em باستخدام هذه الصيغة: الحجم بالبكسل (px) ÷ 16 = الحجم بالـ em.

 

الحل الذي يعمل في جميع المتصفحات، هو تعيين حجم الخط الافتراضي بالنسبة المئوية لعنصر <body>، كالتالى:

body {
  font-size: 100%;
}

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

 

3. خاصية Font Stretch

 

تحدد الخاصية font-stretch وجهًا عاديًا أو مكثفًا أو ممتدًا من الخط. كالتالى:

<style>
    .expanded_value {
        font-stretch: expanded;
    }

    .condensed_value {
        font-stretch: condensed;
    }

    .normal_value {
        font-stretch: normal;
    }

    .percentage_value {
        font-stretch: 50%;
    }

    .global_value {
        font-stretch: inherit;
    }
</style>

<p class="text-left expanded_value">Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p class="text-left condensed_value">Sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p class="text-left normal_value">Massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p class="text-left percentage_value">Convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p class="text-left global_value">Pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

4. خاصية Font Style

 

تُستخدم خاصية font-style في تحديد نمط الخط. كالتالى:

<style>
    .normal_value {
        font-style: normal;
    }

    .italic_value {
        font-style: italic;
    }

    .oblique_value {
        font-style: oblique;
    }
</style>

<p class="normal_value">Egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p class="italic_value">Messa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p class="oblique_value">Convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Messa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

هناك ثلاث قيم لهذه الخاصية:

  • normal: يظهر النص بشكل طبيعي.
  • italic: يظهر النص بخط مائل.
  • oblique: يظهر النص بخط مائل  (مشابه جدًا للخط italic ولكنه أقل دعمًا).

 

Advertisements

 

5. خاصية Font Variant

 

تحدد خاصية font-variant ما إذا كان يجب عرض النص بخط small-caps (يتم تحويل جميع الأحرف الصغيرة إلى أحرف كبيرة). كالتالى:

<style>
    .normal_value {
        font-variant: normal;
    }

    .small_caps_value {
        font-variant: small-caps;
    }
</style>

<p class="normal_value">Consectetur adipiscing elit.</p>
<p class="small_caps_value">Consectetur adipiscing elit.</p>

Consectetur adipiscing elit.

Consectetur adipiscing elit.

 

6. خاصية Font Weight

 

تحدد خاصية font-weight سمك الخط، كالتالى:

<style>
    .normal_value {
        font-weight: normal;
    }

    .bold_value {
        font-weight: bold;
    }

    .bolder_value {
        font-weight: bolder;
    }

    .lighter_value {
        font-weight: lighter;
    }

    .numeric_value {
        font-weight: 800;
    }
</style>

<p class="normal_value">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.</p>

<p class="bold_value">Non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.</p>

<p class="bolder_value">Sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.</p>

<p class="lighter_value">Nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.</p>

<p class="numeric_value">Tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.</p>

Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.

Non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.

Sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.

Nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.

Tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.

 

7. خاصية Font

 

لتقصير الكود، تحدد خاصية font جميع الخصائص المختلفة لخط العنصر.

خاصية font هي خاصية مختصرة لهذه الخصائص:

  1. font-family
  2. font-size
  3. font-stretch
  4. font-style
  5. font-variant
  6. font-weight
  7. line-height

 

مثال للتوضيح:

<style>
    p {
        font: italic small-caps bold 2em Arial;
    }
</style>

<p>Non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.</p>

Non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.

قيم الـ font-size وfont-family مطلوبين. إذا كانت إحدى القيم الأخرى مفقودة ، يتم استخدام قيمتها الافتراضية.

 

كيفية جعل الخطوط متجاوبة Responsive؟

 

لجعل الخطوط متجاوبة يمكن تعيين حجم الخط بوحدة vw (إختصار لـ viewport width). بهذه الطريقة سيتبع حجم النص حجم نافذة المتصفح. كالتالى:

body {
 font-size: 15vm;
}
الإبلاغ عن خطأ

الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements