font-size ဂုဏ်သတ္တိ

font-size ဂုဏ်သတ္တိသည် စာသား၏ ဖောင့်အရွယ်အစားကို သတ်မှတ်ပေးသည်။ ဤဂုဏ်သတ္တိ၏ တန်ဖိုးအဖြစ် မည်သည့် အရွယ်အစားယူနစ်မျိုး ကိုမဆို (သာမန်အားဖြင့် px၊ em သို့မဟုတ် rem) သို့မဟုတ် အထူးသော့ချက်စကားလုံးများ (အလွန်ရှားရှားပါးပါး အသုံးပြုသည်) ကို သတ်မှတ်နိုင်သည်။

ဝါကျဖွဲ့စည်းပုံ

selector {
	font-size: value;
}

သော့ချက်စကားလုံးများဖြင့် ဖော်ပြသော တန်ဖိုးများ

တန်ဖိုး	ရှင်းလင်းချက်
`xx-small`	အငယ်ဆုံးထဲက အငယ်ဆုံး။ နမူနာ - Lorem ipsum dolor sit amet။
`x-small`	အငယ်ဆုံး။ နမူနာ - Lorem ipsum dolor sit amet။
`small`	ငယ်သော။ နမူနာ - Lorem ipsum dolor sit amet။
`medium`	အလတ်စား။ နမူနာ - Lorem ipsum dolor sit amet။
`large`	ကြီးသော။ နမူနာ - Lorem ipsum dolor sit amet။
`x-large`	အလွန်ကြီးသော။ နမူနာ - Lorem ipsum dolor sit amet။
`xx-large`	အကြီးဆုံး။ နမူနာ - Lorem ipsum dolor sit amet။
`larger`	မိဘဆင့်ပွား၏ ဖောင့်အရွယ်အစားထက် တန်ဖိုးတစ်ခုခုဖြင့် ကြီးသည်။
`smaller`	မိဘဆင့်ပွား၏ ဖောင့်အရွယ်အစားထက် တန်ဖိုးတစ်ခုခုဖြင့် ငယ်သည်။

စံထားရှိသော တန်ဖိုး - medium။

နမူနာ

စာပိုဒ်များ၏ ဖောင့်အရွယ်အစားကို 20px အဖြစ် သတ်မှတ်ကြပါစို့ -

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-size: 20px;
}

နမူနာ

ဤနမူနာတွင် စာပိုဒ်အတွက် အရွယ်အစားကို 16px ဖြင့် သတ်မှတ်ထားပြီး ၎င်းအတွင်းရှိ span အတွက် 150% ဖြင့် သတ်မှတ်ထားသည်။ ဤအခြေအနေတွင် span ၏ ဖောင့်အရွယ်အစားသည် ၎င်း၏ မိဘ (စာပိုဒ်) ၏ 150% ဖြစ်မည်ဖြစ်ပြီး ၎င်း၏ တကယ့်အရွယ်အစားမှာ 16px * 150% = 24px ဖြစ်လိမ့်မည် -

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: 150%;
}

နမူနာ

ဤနမူနာတွင် စာပိုဒ်အတွက် အရွယ်အစားကို 16px ဖြင့် သတ်မှတ်ထားပြီး ၎င်းအတွင်းရှိ span အတွက် larger ဖြင့် သတ်မှတ်ထားသည်။ ဤအခြေအနေတွင် span ၏ ဖောင့်အရွယ်အစားသည် ၎င်း၏ မိဘ (စာပိုဒ်) ထက် ကြီးမည်ဖြစ်သည် -

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: larger;
}

နမူနာ

မတူညီသော font-family နှင့် တူညီသော font-size ရှိသည့် ဖောင့်များသည် မျက်မြင်အားဖြင့် အရွယ်အစားတူညီချင်မှ တူညီမည်မဟုတ်ကြောင်း သတိပြုပါ (ဤပြဿနာကို ဖြေရှင်းရန် font-size-adjust ဂုဏ်သတ္တိကို ကြည့်ပါ)။

အောက်ပါနမူနာတွင် စာပိုဒ်နှစ်ခုလုံးအတွက် font-size ကို 16px ဖြင့် သတ်မှတ်ထားသော်လည်း ၎င်းတို့၏ font-family များကို မတူညီအောင် သတ်မှတ်ထားသည် -

<p id="elem1">
	Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
	Lorem ipsum dolor sit amet.
</p>

#elem1 {
	font-size: 16px;
	font-family: Arial;
}
#elem2 {
	font-size: 16px;
	font-family: "Times New Roman";
}