Fonts & Text

စာစီစာရိုက်

Website တစ်ခုမှာ စာဖတ်ရတာ လွယ်ကူပြီး မျက်စိပသာဒ ဖြစ်စေဖို့အတွက် Font အမျိုးအစားတွေနဲ့ စာလုံးအရွယ်အစားတွေကို သေချာ ရွေးချယ် အသုံးပြုဖို့ အရမ်းအရေးကြီးပါတယ် ခင်ဗျာ။

အရေးကြီးသော Font Properties

1. Font Family (ဖောင့်အမျိုးအစား)

ဒါကတော့ ဘယ် Font အမျိုးအစားကို သုံးမလဲဆိုတာ သတ်မှတ်ပေးတာပါ။ တစ်ခါတလေ User ရဲ့ ကွန်ပျူတာမှာ အဲဒီ Font မရှိတာမျိုး ဖြစ်တတ်တဲ့အတွက် အဆင်ပြေအောင် အရန် Font တွေကိုပါ (ဥပမာ - sans-serif) ပူးတွဲ ထည့်ရေးပေးလေ့ ရှိပါတယ်။

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

2. Font Size (စာလုံးအရွယ်အစား)

စာလုံးရဲ့ အကြီးအသေး အရွယ်အစားကို သတ်မှတ်ပေးတာပါ။ အများအားဖြင့် px (Pixels) သို့မဟုတ် Responsive ပိုဖြစ်တဲ့ rem (Relative Unit) ကို အသုံးပြုလေ့ ရှိကြပါတယ်။

h1 {
  font-size: 32px; /* ခေါင်းစဉ်ကြီး */
}

p {
  font-size: 16px; /* ပုံမှန် စာသား */
}

3. Font Weight (စာလုံးအထူအပါး)

စာလုံးတွေကို Bold (အထူ) ပြောင်းချင်တဲ့အခါမှာ အသုံးပြုပါတယ်။

.bold-text {
  font-weight: bold; /* သို့မဟုတ် 700 */
}

Text Alignment (စာသား နေရာချခြင်း)

စာသားတွေကို ဘယ်ဘက်ကပ်မလား၊ ညာဘက်ကပ်မလား၊ ဒါမှမဟုတ် အလယ်တည့်တည့် (Center) မှာ ထားမလား ဆိုတာကို သတ်မှတ်ဖို့ text-align ကို သုံးပါတယ်။

h1 {
  text-align: center; /* အလယ်တည့်တည့် */
}

p {
  text-align: justify; /* ဘယ်ညာ ညီအောင် ညှိမယ် */
}

Text Decoration (စာသား အလှဆင်ခြင်း)

ပုံမှန်အားဖြင့် Link တွေရဲ့ အောက်မှာ ပါလာတတ်တဲ့ မျဉ်းကြောင်း (Underline) တွေကို ဖျောက်ချင်တဲ့အခါမျိုးမှာ အများဆုံး အသုံးပြုလေ့ ရှိပါတယ်။

a {
  text-decoration: none; /* မျဉ်းကြောင်း ဖျောက်မယ် */
}

a:hover {
  text-decoration: underline; /* Mouse တင်မှ မျဉ်းကြောင်း ပေါ်မယ် */
}