CSS ရှိ font အတိုကောက်ပိုင်ဆိုင်မှု

ယခင်သင်ခန်းစာတွင် စာသားအတွက် ပိုင်ဆိုင်မှုများစွာကို လေ့လာခဲ့ပါသည်။ ထိုပိုင်ဆိုင်မှုတစ်ခုစီကို သီးခြားစီရေးသားရန် မကြာခဏဆိုသလို မလွယ်ကူပါ၊ ထို့ကြောင့် CSS တွင် ပိုမိုအဆင်ပြေစေရန် အတိုကောက်ပိုင်ဆိုင်မှုအထူး font ရှိပါသည်။ ဤပိုင်ဆိုင်မှုသည် ဖောင့်အရွယ်အစား၊ မိသားစု၊ ထူထဲမှု၊ စာလုံးစောင်းနှင့် လိုင်းအမြင့်ကို တစ်ပြိုင်နက်တည်း သတ်မှတ်ခွင့်ပြုပါသည်။

ဖော်ပြပါပိုင်ဆိုင်မှုတွင် အောက်ပါ syntax ရှိပါသည်။

font-style font-weight font-size / line-height font-family

ဤတွင် ပိုင်ဆိုင်မှုများ၏ အစီအစဉ်သည် အရေးပါပြီး font-size နှင့် font-family တို့သည် မဖြစ်မနေလိုအပ်ပါသည်။ အထက်ဖော်ပြပါ syntax တွင်ဖော်ပြထားသော ပိုင်ဆိုင်မှုများမှလွဲ၍ အခြားပိုင်ဆိုင်မှုများသည် ဤအတိုကောက်ပိုင်ဆိုင်မှုတွင် မပါဝင်ကြောင်း သတိပြုပါ။

ဥပမာများဖြင့် ကြည့်ရှုကြပါစို့။

ဥပမာ

ကျွန်ုပ်တို့တွင် အောက်ပါ style များရှိသည်ဆိုပါစို့။

cssp {
  font-size: 16px;
  font-family: Arial;
}

ထိုအရာများကို အတိုကောက်ပိုင်ဆိုင်မှုဖြင့် ပြန်ရေးကြပါစို့။

cssp {
  font: 16px Arial;
}

ဥပမာ

ကျွန်ုပ်တို့တွင် အောက်ပါ style များရှိသည်ဆိုပါစို့။

cssp {
  font-size: 16px;
  font-family: Arial;
  line-height: 50px;
}

ထိုအရာများကို အတိုကောက်ပိုင်ဆိုင်မှုဖြင့် ပြန်ရေးကြပါစို့။

cssp {
  font: 16px/50px Arial;
}

ဥပမာ

ကျွန်ုပ်တို့တွင် အောက်ပါ style များရှိသည်ဆိုပါစို့။

cssp {
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
}

ထိုအရာများကို အတိုကောက်ပိုင်ဆိုင်မှုဖြင့် ပြန်ရေးကြပါစို့။

cssp {
  font: bold 16px Arial;
}

ဥပမာ

ကျွန်ုပ်တို့တွင် အောက်ပါ style များရှိသည်ဆိုပါစို့။

cssp {
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
  line-height: 50px;
  font-style: italic;
}

ထိုအရာများကို အတိုကောက်ပိုင်ဆိုင်မှုဖြင့် ပြန်ရေးကြပါစို့။

cssp {
  font: bold italic 16px/50px Arial;
}

လက်တွေ့လေ့ကျင့်ခန်းများ

cssp {
  font-family: "Times New Roman";
  font-size: 13px;
  line-height: 20px;
}

cssp {
  width: 300px;
  font-family: Arial;
  color: red;
  font-size: 40px;
  font-weight: bold;
}

cssp {
  font-family: Arial;
  font-size: 40px;
  font-weight: bold;
  text-indent: 50px;
  font-style: italic;
  line-height: 60px;
}