أهلا بكم في درس جديد من دروس css وفي هذا الدرس سوف نتعرف على خاصية جديدة من خواص css وهي خاصية font-size
من خلال استخدام هذه الخاصية يمكننا التحكم في حجم الخط كما نريد.
body {font-size:14px;}تنسيق الخط الافتراضى للموقع أو الصفحة ككلfont-size:14px;حجم الخط هنا 14 بيكسلfont-size:2em;ما يعادل ضعف الحجم الافتراضيfont-size:1pc;ما يعادل 16 بيكسل
مثال
<div class='font-size' style='font-size:14px;'>حجم الخط الحالي 14 بيكسل</div>
<div class='font-size' style='font-size:28px;'>حجم الخط الحالي 28 بيكسل</div>
<div class='font-size' style='font-size:1em;'>
حجم الحالي 2em وهو ما يعادل ضعف الخط الافتراضى
</div>
<div class='font-size' style='font-size:2em;'>حجم الخط الحالى 2em ما يعادل ضعف الحجم الافتراضي</div>
<div class='font-size' style='font-size:1pc;'>حجم الخط الحالي 1pc ما يعادل 16 بيكسل</div>
النتيجة
حجم الخط الحالي 14 بيكسل
حجم الخط الحالي 28 بيكسل
حجم الحالي 2em وهو ما يعادل ضعف الخط الافتراضى
حجم الخط الحالى 2em ما يعادل ضعف الحجم الافتراضي
حجم الخط الحالي 1pc ما يعادل 16 بيكسل
px
<div class='font-size-px'> <p class='font-size-14px'>font size 14px</p> <p class='font-size-28px'>font size 28px</p> <p class='font-size-36px'>font size 36px</p> </div>
p.font-size-14px{font-size:14px;}
p.font-size-28px{font-size:28px;}
p.font-size-36px{font-size:36px;}
النتيجة
font size 14px
font size 28px
font size 36px
em
<div class='font-size-em'> <p class='font-size-1em'>font size 1em</p> <p class='font-size-2em'>font size 3em</p> <p class='font-size-3em'>font size 3em</p> </div>
p.font-size-14em{font-size:1em;}
p.font-size-28em{font-size:2em;}
p.font-size-36em{font-size:3em;}
النتيجة
font size 1em
font size 2em
font size 3em
pc
<div class='font-size-pc'> <p class='font-size-1pc'>font size 1pc</p> <p class='font-size-2pc'>font size 3pc</p> <p class='font-size-3pc'>font size 3pc</p> </div>
p.font-size-1pc{font-size:1pc;}
p.font-size-2pc{font-size:2pc;}
p.font-size-3pc{font-size:3pc;}
النتيجة
font size 1pc
font size 2pc
font size 3pc
شرح خاصية font-size للتحكم في حجم الخط