More

[ دورة CSS ] التصميم CSS – الدرس الثالث – نوع الخط

تستخدم خاصية نوع الخط في لغة CSS لتحديد عائلة الخط font family و حجم و الشكل لخط النص

عائلة الخطوط / Font Family

ان عائلة الخطوط هي عبارة عن مجموعة من أنواع الخطوط تستخدم مع خاصية font-family

يجب أن تحتوي خاصية font-family على العديد من أنواع الخطوط وذلك بسبب
اذا كان المتصفح لايدعم الأول عند ينتقل للآخر واذا لايدعم الاخر ينتقل
للثالث وهكذا

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

ملاحظة: اذا كان اسم نوع الخط يحتوي على أكثر من كلمة عندها يجب أن يوضع بين اشارات الاقتباس مثال

font-family: "Times New Roman"

اذا قمت بوضع أكثر من نوع خط عندها يمكنك الفصل بينهم من خلال اشارة الفاصلة “,”

مثال

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

شكل الخط Font Style

تستخدم خاصية شكل الخط بشكل واسع font-style لتحديد ميلان النص أي italic

لهذه الخاصية ثلاث قيم مختلفة :

  • طبيعي normal – يظهر النص بشكل طبيعي عادي
  • مائل italic – يظهر النص بشكل مائل
  • منحني oblique – يظهر النص بشكل منحني ( منحني نفس استخدام المائل ولكن غير مدعوم من قبل المتصفحات لذلك يفضل استخدام المائل )

مثال

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

حجم الخط Font Size

تضبط خاصية font-size حجم الخط

كونك قادراً على ضبط حجم الخط فهذه مرحلة مهمة في التصميم المثالي
لموقعك . ولكن لاتستخدم ضبط حجم الخط font-size لجعل الفقرة تبدو كبيرةً
كالعنوان أو العنوان يبدو صغيراً كالفقرة

يمكنك دوماً استخدام وسوم HTML للعناوين من <h1> الى <h6> أو <p> للفقرات
قيمة حجم الخط يمكن أن تكون مطلقة أو متصلة

READ  [ دورة CSS ] الدروس المتقدمة CSS - الدرس الثالث - الإظهار والإخفاء

الحجم المطلق Absolute size

  • ضبط النص لحجم معين
  • لايسمح للمستخدم بتغيير حجم الخط في جميع المتصفحات (خطوة سيئة لأسباب تتعلق بإمكانية الوصول)
  • يعتبر الحجم المطلق ذو نفع وخاصة عندما يكون الحجم الظاهر للنص معروف

الحجم المتصل Relative size

  • ضبط حجم النص المتصل حول العناصر
  • يسمح للمستخدم بتغيير حجم الخط في المتصفحات

ان لم تقم بتحديد حجم الخط فإن الحجم الافتراضي للنص هو طبيعي normal مثل الفقرة ويكون الحجم تماماً 16 بكسل أي (16px=1em)

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

ان ضبط حجم الخط من خلال البكسل سيمنحك تحكم كامل على حجم النص

مثال

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

في المثال السابق سيسمح لمتصفحات الانترنت مثل Explorer 9, Firefox, Chrome, Opera, and Safari بضبط حجم النص

ملاحظة: المثال السابق لايعمل على اصدارات انترنت اكسبلورر Internet Explorer أقدم من 9

يمكن ضبط حجم النص من خلال جميع المتصفحات باستخدام أداة التقريب zoom
(يمكن ضبط حجم الصفحة بالكامل ليس فقط النص)

ضبط حجم الخط من خلال em

لتجنب مشاكل اصدارات المتصفحات المزعجة القديمة من انترنت اكسبلورر
وغيرها , تمكّن المبرمجون من استخدام وحدة القياس em بدلاً من البكسل

تنصح منظمة الويب العالمية W3C باستخدام وحدة القياس em

كل 1em يعادل حجم الخط الطبيعي حيث أن الحجم الافتراضي في المتصفحات هو 16px ولهذا فإن الحجم الافتراضي يعتبر 1em

يمكن حساب حجم الخط من خلال عملية قسمة البكسل على 16 وسيظهر لنا الناتج بوحدة em

Px/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

READ  [ دورة CSS ] الدروس المتقدمة CSS - الدرس الثامن - شريط القوائم navbar

ولكن لسوء الحظ بعض الاصدارات الأقدم من متصفح انترنت اكسبلورر IE يصبح
النص كبيراً جداً عند ضبطه حجم كبير أو صغيراً جداً اذا تم ضبطه صغير

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

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

مثال

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

الآن ان الكود يعمل بشكل جيد ويظهر على جميع المتصفحات الحجم الذي نريده أن يظهر

جميع خاصيات CSS المتعلقة font

الخاصية الشرح
font ضبط جميع قيم font في خاصية واحدة
font-family تحديد عائلة الخطوط للنص
font-size تحديد حجم الخط للنص
font-style تحديد تصميم الخط للنص
font-variant تحديد فيما اذا النص سيتم عرضه بخطوط أحرف صغيرة أم لا
font-weight تحديد الغماقة للنص
Tags
Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker
Inline
Inline