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

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

<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;}

<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;}

<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;}