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

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

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

cssselector {
  font-size: value;
}

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

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

နမူနာ

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

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

cssp {
  font-size: 20px;
}

Результат:

နမူနာ

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

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

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

Результат:

နမူနာ

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

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

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

Результат:

နမူနာ

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

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

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

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

Результат: