أنواع الخطوط في CSS | ستايلات CSS

 

باستخدام سمات الخط في CSS، يمكنك تغيير نوع الخط وحجمه ونمطه. في هذا الدرس سنتناول هذه الصفات.


الخاصية font-family في CSS  

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

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

إذا أردنا تعيين أكثر من قيمة واحدة لسمة font-family، فإننا نفصل بينها باستخدام comma:

p {
font-family: "Times New Roman", Times, serif;
}

نمط الخط 

غالبًا ما تُستخدم سمة نمط الخط لتحديد نصوص مائلة.

تحتوي سمة نمط الخط على ثلاث قيم:

   ● عادي - يتم عرض النص بشكل طبيعي
   ● مائل - يتم عرض النص بخط مائل
   ● منحرف - النص منحرف (هذا الوضع مشابه جدًا للوضع المائل ولكنه أقل دعمًا من قبل المتصفحات)
p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}

حجم الخط  

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

استخدم دائمًا علامة HTML المناسبة، على سبيل المثال <h1> إلى علامات <h6> للعناوين وعلامات <p> للفقرات.

يمكن أن تكون قيمة سمة حجم الخط قيمة مطلقة أو نسبية.

القيم المطلقة:

       ● يضبط حجم النص بقيمة معينة
       ● لا يسمح للمستخدمين بتغيير حجم النص في جميع المتصفحات
       ● تكون القيم المطلقة مفيدة عندما يكون الحجم المادي للمخرجات معروفًا


القيم النسبية:

          ● يضبط الحجم بالنسبة للعناصر المحيطة به
          ● يسمح للمستخدمين بتغيير حجم النص في المتصفحات.  

ضبط حجم الخط بالبكسل

يمنحك ضبط حجم النص بوحدات البكسل تحكمًا كاملاً في حجم النص:

h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}

اضبط حجم الخط باستخدام Em 

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

وحدة الحجم em موصى بها من قبل W3C.

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

يمكن حساب الأبعاد من البكسل إلى em باستخدام هذه الصيغة: بكسل / 16 = em

h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}

p {
font-size: 0.875em; /* 14px/16=0.875em */
}

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

لسوء الحظ، لا تزال هناك مشكلات في الإصدارات القديمة من Internet Explorer فيما يتعلق بحجم النص.


استخدم مزيجًا من النسبة المئوية و em

الطريقة التي تعمل في جميع المتصفحات هي تعيين قيمة افتراضية لسمة حجم الخط إلى نسبة مئوية لعنصر النص: 

body {
font-size: 100%;
}

h1 {
font-size: 2.5em;
}

h2 {
font-size: 1.875em;
}

p {
font-size: 0.875em;
}

الآن يعمل كودنا بشكل أفضل! حجم النص هو نفسه في جميع المتصفحات ويسمح لجميع المتصفحات بتكبير وتصغير النص وتغيير حجمه.


وزن الخط  

تحدد سمة وزن الخط وزن الخط:

p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}




كلمات مفتاحية: