- font-family
- font-size
- font-style
- font-variant
- font-weight
- font
Computer မွာအသံုးျပဳတဲ့ Basic font (၂) မ်ိဳးရွိပါတယ္။ ၄င္းတို.မွာ Sans-Serif ႏွင့္ Serif တို.ပဲျဖစ္ပါတယ္။ ေအာက္တြင္ Sans-serif ႏွင့္ Serif fonts တို.ရဲ့ ျခားနားျခင္းကိုေဖာ္ျပထားပါတယ္။
 |
| This example is from www.w3schools.com |
Computer screens မွာေတာ့ Sans-serif font က Serif font ထက္ ဖက္ရတာ ရွင္းလင္းျပီး အဆင္ေျပလို. Sans-serif font ကိုပဲေရြးခ်ယ္အသံုး ျပဳၾကပါတယ္။
The font-family property
Font-family ကို အသံုးျပဳမယ့္ font အမ်ိဳးအစား ကို declaration လုပ္ဖို.သံုးပါတယ္။ font-family မွာ fallback system အေနနဲ. Several font ကိုသံုးျပီးလုပ္ေဆာင္ႏိုင္ပါတယ္။ တစ္ခါတေလက်ေနာ္တို.သံုးလုိက္တဲ့ font အမ်ိဳးအစားကို browser က support မလုပ္ေပးႏိုင္တဲ့အခါမ်ိဳးမွာ ေနာက္တစ္ခုကို choice လုပ္ျပီး ေဖာ္ျပေပးသြားပါတယ္။ ဆိုလိုတာက ပထမ ဦးစားေပး declaration လုပ္ထားတာ ကို support မလုပ္ႏိုင္ရင္ ေနာက္တစ္ခု declaration လုပ္ထားတာကို အစားထိုးေဖာ္ျပေပးသြားမွာပါ။font-family အတြက္ value ေရးတဲ့ အခါမွာ မိမိအသံုးျပဳခ်င္တဲ့ font အမည္ကို အရင္ေရးရျပီး ေနာက္ဆံုးမွာေတာ့ generic family name (sans-serit or serif) နဲ. အဆံုးသတ္ေရးရပါတယ္။ က်ေနာ္တို. သတ္မွတ္ေပးတဲ့ font အမ်ိဳးအမည္ေတြ ကို user ရဲ့ browser က support မလုပ္ႏိုင္တဲ့အခါမွာ ၄င္း၏ base font အမ်ိဳးအစား တစ္ခုနဲ.အစားထိုးျပီးျပသြားေပးဖို.အတြက္ generic family name ကို ေနာက္ဆံုးမွာေရးသားရျခင္းျဖစ္ပါတယ္။
ေအာက္က example မွာ font-family အသံုးျပဳျပီး ေရးသားပံုကို ေလ့လာၾကည့္ပါ။
<!DOCTYPE html>
<html>
<head>
<style>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<h2> CSS font-family </h2>
<p class="serif">This paragraph is shown in the Times New Roman font.</p>
<p class="sansserif">This paragraph is shown in the Arial font.</p>
</body>
</html>
The font-size property
font-size ကိုေတာ့ text ေတြရဲ့ size ကိုသတ္မွတ္ဖို.သံုးပါတယ္။ font size သတ္မွတ္မွဳက web design မွာအေရးၾကီးပါတယ္။ paragrah ရဲ့ font size ကို heading နဲ.တူေအာင္ေပးလို.မရသလို heading ကိုလည္း paragraph နဲ. Size တူေအာင္ font size ကိုသတ္မွတ္လုပ္ေဆာင္လို. မရပါဘူး။
font-size ၏ value unit ကို px, % အျပင္ em နဲ.လည္း အသံုးျပဳလို.ရပါတယ္။ Developer ေတာ္ေတာ္မ်ားမ်ားကေတာ့ px (pixel) အစား em ကိုအသံုးျပဳၾကပါတယ္။ Browser ေတြရဲ့ default font size က 16px ျဖစ္ပါတယ္။ em ႏွင့္ px အရဲ့ အခ်ိဳးက 1em သည္ 16px နဲ.ညီမွ်ပါတယ္။ အကယ္၍ 14px ကိုအသံုးျပဳခ်င္လ်င္ 14px ကို 16 နဲ.စားျပီး ရလာတဲ့ အေျဖ 0.875em ကို fon-size value အျဖစ္ အသံုးျပဳရပါတယ္။ ဥပမာ p {font-size:0.875em;}
ေအာက္မွ example မွာ unit ပံုစံသံုးမ်ိဳးလံုးျဖင့္ ေရးျပထားပါတယ္။ ေလ့လာၾကည့္ပါ။
<!DOCTYPE html>
<html>
<head>
<style>
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:14px;}
p.percent{font-size:100%;}
</style>
</head>
<body>
<h2>This is heading 2, using 1.875em </h2>
<p>This paragraph is 14px</p>
<p class="percent">This paragraph is using %.</p>
</body>
</html>
<html>
<head>
<style>
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:14px;}
p.percent{font-size:100%;}
</style>
</head>
<body>
<h2>This is heading 2, using 1.875em </h2>
<p>This paragraph is 14px</p>
<p class="percent">This paragraph is using %.</p>
</body>
</html>
The font-style property
font-style property ကိုေတာ့ italic text အတြက္ အဓိကသံုးပါတယ္။ font-style မွာ value သံုးမ်ိဳးရွိပါတယ္။ ၄င္းတို.မွာ- normal
- italic
ေအာက္မွ example မွာေလ့လာၾကည့္ပါ။
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">This is normal paragraph.</p>
<p class="italic">This is italic paragraph.</p>
<p class="oblique">This is oblique paragraph.</p>
</body>
</html>
The font-variant property
font-variant property မွာ value ၂ ခုရွိပါတယ္။ normal နဲ. small-caps တို.ျဖစ္ပါတယ္။ ၄င္းကို Internet Explorer 7 မွာ support မလုပ္ေပးပါဘူး။ IE8 အတြက္ဆိုလ်င္ေတာင္ !DOCTYPE လိုျပီး IE 9 မွာေတာ့ support လုပ္ေပးပါတယ္။ေအာက္က example မွာၾကည့္လိုက္ရင္ font-variant:small-caps က font style ကိုဘယ္လိုပံုစံမ်ိဳး ေျပာင္းလဲေပးႏိုင္လည္းဆိုတာ သိႏိုင္ပါတယ္။
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
</head>
<body>
<p class="normal">I am a Web Designer.</p>
<p class="small">I am a Web Designer.</p>
</body>
</html>
The font-weight property
Font-weight မွာ value အေနနဲ. normal, bold, bolder, lighter, 100 to 900 တို.ရွိပါတယ္။ ၄င္းသည္လည္း IE9 မွာမွစျပီး support လုပ္ပါတယ္။ ေအာက္က example ကိုေလ့လာၾကည့္ပါ။<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
</head>
<body>
<p class="normal">This paragraph is normal.</p>
<p class="light">This value is lighter.</p>
<p class="thick">This value is bold.</p>
<p class="thicker">Using 900. 400 is the same as normal.</p>
</body>
</html>
The font property
Font နဲ.ပတ္သတ္ျပီး property တစ္ခုျခင္းစီး အသံုးမျပဳပဲ font property တစ္ခုတည္းျဖင့္ one declaration လုပ္လို.ရပါတယ္။ ဒါေပမယ့္ order အတိုင္းျဖစ္ဖို.ေတာ့ လိုပါတယ္။ order အတိုင္းဆိုေပမယ့္ အားလံုးထည့္ရမယ္လို. ေျပာတာမပာုတ္ပါဘူး။ မိမိသံုးမယ့္ style လုပ္ခ်င္တဲ့ value ကိုပဲသံုးတဲ့ အခါမွာ order အတိုင္းျဖစ္ဖို.လို.ဆိုလိုတာပါ။ မိမိမလုပ္ခ်င္တဲ့ value ကိုထည့္ေရးစရာမလိုပါဘူး။ ၄င္း၏ order မွာ ေအာက္ပါအတိုင္းျဖစ္ပါတယ္...font: font-style font-variant font-weight font-size/line-height font-family
example 1: p {font:italic small-caps bold 14px/20px Arial, serif;}
example 2: p {font:14px/20px Arial, serif;}
example 2: p {font:14px Arial, serif;}
ေအာက္မွ example ကိုေလ့လာၾကည့္ပါ။
<!DOCTYPE html>
<html>
<head>
<style>
p.exe1{font:12px arial,sans-serif;}
p.exe2{font:italic bold 12px/30px Georgia,serif;}
</style>
</head>
<body>
<p class="exe1">This is exe1. This is exe1. This is exe1. This is exe1. This is exe1. This is exe1. This is exe1.</p>
<p class="exe2">This is example 2. This is example 2. This is example 2. This is example 2. This is example 2.</p>
</body>
</html>
ေအာက္ကပံုမွာေလ့လာၾကည့္ပါ။ ပထမ paragraph အတြက္ line-height ကိုမသတ္မွတ္ထားလို. Default အတိုင္းျပေပးပါတယ္။ ဒုတိယ paragraph မွာ ေတာ့ က်ေနာ္တို.သတ္မွတ္ထားတဲ့ line-height အကြားအေ၀းနဲ.ေဖာ္ျပေပးပါတယ္။
No comments:
Post a Comment