CSS ကျူတိုရီရယ်

CSS ပင်မစာမျက်နှာ CSS နိဒါန်း CSS Syntax CSS ရွေးချယ်မှုများ CSS လုပ်နည်း CSS မှတ်ချက်များ CSS အရောင်များ CSS နောက်ခံများ CSS နယ်နိမိတ်များ CSS အနားသတ်များ CSS Padding CSS အမြင့်/အနံ CSS Box မော်ဒယ် CSS အကြမ်းဖျင်း CSS စာသား CSS ဖောင့်များ CSS အိုင်ကွန်များ CSS လင့်ခ်များ CSS စာရင်းများ CSS ဇယားများ CSS Display CSS Max-အကျယ် CSS ရာထူး CSS Z အညွှန်း CSS Overflow CSS Float CSS Inline-block CSS ကို ချိန်ညှိပါ။ CSS Combinators CSS Pseudo-class CSS Pseudo-ဒြပ်စင် CSS Opacity CSS Navigation Bar CSS Dropdowns CSS ရုပ်ပုံပြခန်း CSS Image Sprites CSS Attr ရွေးချယ်မှုများ CSS ပုံစံများ CSS ကောင်တာများ CSS ဝဘ်ဆိုဒ် အပြင်အဆင် CSS ယူနစ်များ CSS တိကျမှု CSS !အရေးကြီးသည်။ CSS သင်္ချာလုပ်ဆောင်ချက်များ

CSS အဆင့်မြင့်

CSS Rounded Corners CSS Border ပုံများ CSS နောက်ခံများ CSS အရောင်များ CSS အရောင်သော့ချက်စာလုံးများ CSS Gradients CSS Shadows CSS စာသားအကျိုးသက်ရောက်မှုများ CSS ဝဘ်ဖောင့်များ CSS 2D အသွင်ပြောင်းမှုများ CSS 3D အသွင်ပြောင်းမှုများ CSS အသွင်ကူးပြောင်းမှုများ CSS Animations CSS Tooltips CSS စတိုင်ပုံများ CSS Image Reflection CSS object-fit CSS object-position CSS Masking CSS ခလုတ်များ CSS Pagination CSS ကော်လံမျိုးစုံ CSS User Interface CSS အပြောင်းအလဲများ CSS Box Sizing CSS မီဒီယာမေးခွန်းများ CSS MQ နမူနာများ CSS Flexbox

CSS တုံ့ပြန်မှု

RWD မိတ်ဆက် RWD Viewport RWD Grid View RWD မီဒီယာမေးခွန်းများ RWD ပုံများ RWD ဗီဒီယိုများ RWD မူဘောင်များ RWD နမူနာများ

CSS Grid

Grid Intro ဂရစ်ကွန်တိန်နာ ဇယားကွက်

CSS SASS

SASS ကျူတိုရီရယ်

CSS နမူနာများ

CSS Templates များ CSS နမူနာများ css စာမေးပွဲ CSS လေ့ကျင့်ခန်းများ CSS လက်မှတ်

CSS ကိုးကားချက်များ

CSS အကိုးအကား CSS ရွေးချယ်မှုများ CSS လုပ်ဆောင်ချက်များ CSS အကိုးအကား Aural CSS ဝဘ်ဘေးကင်းသောဖောင့်များ CSS Animatable CSS ယူနစ်များ CSS PX-EM Converter CSS အရောင်များ CSS အရောင်တန်ဖိုးများ CSS မူရင်းတန်ဖိုးများ CSS Browser ပံ့ပိုးမှု

CSS ဝဘ်ဘေးကင်းသောဖောင့်များ


ဝဘ်ဘေးကင်းသောဖောင့်များကား အဘယ်နည်း။

ဝဘ်ဘေးကင်းသောဖောင့်များသည် ဘရောက်ဆာများနှင့် စက်များအားလုံးတွင် အလုံးစုံထည့်သွင်းထားသည့် ဖောင့်များဖြစ်သည်။


Fallback ဖောင့်များ

သို့သော်၊ 100% လုံးဝဝဘ်ဘေးကင်းသောဖောင့်များမရှိပါ။ ဖောင့်ကို ရှာမတွေ့ခြင်း သို့မဟုတ် မှန်ကန်စွာ ထည့်သွင်းခြင်း မပြုနိုင်သည့် အခွင့်အရေး အမြဲရှိသည်။

ထို့ကြောင့်၊ နောက်ပြန်ဖောင့်များကို အမြဲသုံးရန် အလွန်အရေးကြီးပါသည်။

ဆိုလိုသည်မှာ သင်သည် font-family ပိုင်ဆိုင်မှုတွင် အလားတူ "backup fonts" စာရင်းကို ထည့်သင့်သည်။ ပထမဖောင့် အလုပ်မလုပ်ပါက၊ ဘရောက်ဆာသည် နောက်တစ်ခုနှင့် နောက်တစ်ခုကို စမ်းကြည့်ပါမည်။ ယေဘုယျဖောင့်မိသားစုအမည်ဖြင့် စာရင်းကို အမြဲတမ်းအဆုံးသတ်ပါ။

ဥပမာ

ဤတွင်၊ Tahoma၊ Verdana နှင့် sans-serif အမျိုးအစားသုံးမျိုးရှိသည်။ ပထမတစ်မျိုးကို ရှာမတွေ့ပါက ဒုတိယနှင့် တတိယဖောင့်များသည် အရန်များဖြစ်သည်။

p {
font-family: Tahoma, Verdana, sans-serif;
}

HTML နှင့် CSS အတွက် အကောင်းဆုံး ဝဘ်ဘေးကင်းသော ဖောင့်များ

အောက်ပါစာရင်းများသည် HTML နှင့် CSS အတွက် အကောင်းဆုံး ဝဘ်ဘေးကင်းသော ဖောင့်များဖြစ်သည်-

  • Arial (sans-serif)
  • ဗာဒါနာ (ဆာရစ်ဖ်မပါ)
  • Helvetica (sans-serif)
  • တာဟိုမား (ဆာရစ်ဖ်မပါ)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • ဂျော်ဂျီယာ (serif)
  • Garamond (serif)
  • ချောစာအသစ် (monospace)
  • Brush Script MT (ကာတွန်း)

မှတ်ချက်- သင့်ဝဘ်ဆိုဒ်ကို မထုတ်ဝေမီ၊ မတူညီသောဘရောက်ဆာများနှင့် စက်များတွင် သင့်ဖောင့်များ မည်သို့မည်ပုံပေါ်သည်ကို အမြဲစစ်ဆေးပြီး နောက်ပြန်ဖောင့်များကို အမြဲသုံးပါ။



Arial (sans-serif)

Arial သည် အွန်လိုင်းနှင့် ပုံနှိပ်မီဒီယာနှစ်ခုလုံးအတွက် အသုံးအများဆုံးဖောင့်ဖြစ်သည်။ Arial သည် Google Docs ရှိ မူရင်းဖောင့်လည်းဖြစ်သည်။

Arial သည် အလုံခြုံဆုံး ဝဘ်ဖောင့်များထဲမှ တစ်ခုဖြစ်ပြီး ၎င်းကို အဓိက လုပ်ဆောင်မှု စနစ်များအားလုံးတွင် ရနိုင်သည်။

ဥပမာ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


ဗာဒါနာ (ဆာရစ်ဖ်မပါ)

Verdana သည် အလွန်ရေပန်းစားသော ဖောင့်တစ်ခုဖြစ်သည်။ Verdana သည် သေးငယ်သော ဖောင့်အရွယ်အစားများအတွက်ပင် အလွယ်တကူ ဖတ်နိုင်သည်။

ဥပမာ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Helvetica (sans-serif)

Helvetica ဖောင့်ကို ဒီဇိုင်နာများ နှစ်သက်သည်။ လုပ်ငန်းအမျိုးအစားများစွာအတွက် သင့်လျော်ပါသည်။

ဥပမာ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


တာဟိုမား (ဆာရစ်ဖ်မပါ)

Tahoma ဖောင့်တွင် စာလုံးများကြားတွင် နေရာလွတ်နည်းသည်။

ဥပမာ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Trebuchet MS (sans-serif)

Trebuchet MS ကို 1996 ခုနှစ်တွင် Microsoft မှ ဒီဇိုင်းထုတ်ခဲ့သည်။ ဤဖောင့်ကို ဂရုတစိုက်အသုံးပြုပါ။ မိုဘိုင်းလည်ပတ်မှုစနစ်အားလုံးက မပံ့ပိုးပါ။

ဥပမာ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Times New Roman (serif)

Times New Roman သည် ကမ္ဘာပေါ်တွင် အသိအမှတ်ပြုရဆုံး ဖောင့်များထဲမှ တစ်ခုဖြစ်သည်။ ၎င်းသည် ပရော်ဖက်ရှင်နယ်ပုံပေါက်ပြီး သတင်းစာများစွာနှင့် "သတင်း" ဝဘ်ဆိုဒ်များတွင် အသုံးပြုသည်။ ၎င်းသည် Windows စက်များနှင့် အပလီကေးရှင်းများအတွက် အဓိကဖောင့်တစ်ခုလည်းဖြစ်သည်။

ဥပမာ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


ဂျော်ဂျီယာ (serif)

ဂျော်ဂျီယာသည် အံဝင်ခွင်ကျ serif ဖောင့်တစ်ခုဖြစ်သည်။ ၎င်းသည် မတူညီသောဖောင့်အရွယ်အစားများတွင် အလွန်ဖတ်ရှုနိုင်သောကြောင့် ၎င်းသည် မိုဘိုင်းတုံ့ပြန်မှုဒီဇိုင်းအတွက် သင့်လျော်သော ကိုယ်စားလှယ်တစ်ဦးဖြစ်သည်။

ဥပမာ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Garamond (serif)

Garamond သည် ပုံနှိပ်စာအုပ်များစွာအတွက် အသုံးပြုသည့် ဂန္တဝင်ဖောင့်တစ်ခုဖြစ်သည်။ ၎င်းတွင် အချိန်မကုန်သော အသွင်အပြင်နှင့် ဖတ်ရှုနိုင်မှု ကောင်းမွန်သည်။

ဥပမာ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


ချောစာအသစ် (monospace)

Courier New သည် အသုံးအများဆုံး monospace serif ဖောင့်ဖြစ်သည်။ Courier New ကို ကုဒ်ဖော်ပြမှုများတွင် မကြာခဏအသုံးပြုကြပြီး အီးမေးလ်ဝန်ဆောင်မှုပေးသူအများအပြားက ၎င်းကို ၎င်းတို့၏မူလဖောင့်အဖြစ် အသုံးပြုကြသည်။ Courier New သည် ရုပ်ရှင်ဇာတ်ညွှန်းများအတွက် စံဖောင့်တစ်ခုလည်းဖြစ်သည်။

ဥပမာ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Brush Script MT (ကာတွန်း)

Brush Script MT ဖောင့်ကို လက်ရေးဖြင့်တုပရန် ဒီဇိုင်းထုတ်ထားသည်။ ၎င်းသည် ပြေပြစ်ပြီး ဆန်းပြားသော်လည်း ဖတ်ရခက်နိုင်သည်။ ဂရုတစိုက်အသုံးပြုပါ။

ဥပမာ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

အကြံပြုချက်- ရရှိနိုင်သော Google Fonts အားလုံးကို စစ်ဆေးပြီး ၎င်းတို့ကို အသုံးပြုနည်းကို ကြည့်ပါ။