شرح خاصية font-size للتحكم في حجم الخط

  • css
أهلا بكم في كود ويب
أهلا بكم في درس جديد من دروس 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

css