Font Properties
CSS မွာ စာလံုးေတြရဲ့ Properties ေတြကို font family, boldness,
size တို႔နဲ႔ သတ္မွတ္ပါတယ္၊ font family ကေတာ့ စာလံုး အမ်ိဳး အစားပါ၊ ဥပမာ
Zawgyi-One ကိုသံုးမွာလား၊ “Time New Roman” ကိုသံုးမွာလား စသျဖင့္ သံုးမယ့္ font
နာမည္ကိုေရြးခ်ယ္တာပါ၊
Serif & Sans-serif
ေလ့လာစရာ font မ်ိဳးစိတ္ ႏွစ္ခုရွိပါတယ္၊ Serif နဲ႔ Sans-serif တို႔ပါ၊
serif ဆိုတာက စာလံုးတစ္လံုးရဲ့ အဆံုးသတ္မွာ အေကြးေလးေတြ ေဒါင့္ေလးေတြပါတဲ့
စာလံုး
အမ်ိဳး အစားကိုေခၚျပီး San-serif ကေတာ့ အတိ ျပတ္သြားတဲ့ စာလံုးမ်ိဳးျဖစ္ပါတယ္၊
ေအာက္မွာ သရုပ္ျပပံုကိုၾကည့္ပါ၊
CSS Font Families
Css မွာ အသံုးျပဳတဲ့ font family ႏွစ္ခုကေတာ့ generic family နဲ႔ font
family ပါ၊ generic family ဆိုတာေတာ့ အထက္က ပံုမွာျပေတြ႔ရတဲ့ serif နဲ႔
san-serif
တို႔လို စာလံုး မ်ိဳးရိုးေတြကိုေခၚျပီး font family ကေတာ့ “Zawgyi-One” တို႔
“Ariel” တို႔လို စာလံုးနာမည္ေတြကိုေခၚပါတယ္၊
Font Family
သင္ေရးထားတဲ့ စာသားကို ဘယ္စာလံုး အမ်ိဳးအစားသံုးမလဲလို႔ သတ္မွတ္တဲ့အခါမွာ
property အေနနဲ႔ font-family ကိုသံုးတယ္၊ value ကေတာ့
သင့္စိတ္ၾကိဳက္ font
အမ်ိဳးအစားနာမည္ကိုထည့္ရတယ္၊ ေအာက္မွာဥပမာ ၾကည့္၊
့ h2 {font-family :
"Zawgyi-One"; }
အထက္မွာေတာ့ HTML Doucment ထဲမွာရွိတဲ့ <h2> Tags နဲ႔ ပတ္သတ္သမွ်
စာလံုးေတြကို Zawgyi-One စာလံုးသံုးမယ္လို႔သတ္မွတ္လိုက္တာ၊
အဲ့ဒီ့လိုစာလံုး
အမ်ိဳးအစားသတ္မွတ္တဲ့အခါ မ်ားေသာအားျဖင့္ စာလံုးအမ်ိဳးအစားတစ္ခုထဲကို မသတ္မွတ္ပဲ
အမ်ိဳးအစားသံုးေလးခုကို
တြဲျပီးသတ္မွတ္တယ္၊ ေအာက္က ပံုစံအတိုင္း၊
h2 {font-family : "Zawgyi-One" Arial , Times , serif; }
အထက္မွာ စာလံုး အမ်ိဳးအစားေလးမ်ိဳးေတာင္သတ္မွတ္လိုက္တယ္၊ အဓိပၸါယ္က Zawgyi
One ဆိုတဲ့ စာလံုး အမ်ိဳးအစားကို သံုးခိုင္တာ၊ ဒါေပမယ့္
အသံုးျပဳသူရဲ့
ကြန္ျပဴတာမွာ Zawgyi-One စာလံုးမရွိရင္ျဖင့္ ဒုတိယ စာလံုးအမ်ိဳးအစားျဖစ္တဲ့ Arial
ကိုသံုးခိုင္းတယ္၊ Zawgyi One ေကာ
Arial ေကာမရွိရင္ေတာ့ Times
စာလံုးကိုသံုးခိုင္းတယ္၊ အဲ့ဒီ့ သံုးမ်ိဳးလံုးမရွိရင္ serif ဆိုတဲ့ font
မ်ိဳးစိတ္ကိုသံုးခိုင္းထားတယ္၊ serif ကေတာ့ စာလံုး
မ်ိဳးစိတ္ျဖစ္တဲ့အတြက္ရွိမွာေသခ်ာတယ္၊ ဒီလိုေရးတဲ့အခါ ေရွ႕ဆံုးမွာေရးတဲ့စာလံုး
အမ်ိဳးအစားကို ပဲ browser ေတြက သံုးတယ္၊
မရွိရင္ေတာ့ ေနာက္တစ္ခုေပါ့၊ ေနာက္ထပ္
သတိထားရမွာက စာလံုး အမ်ိဳးအစားက စကားလံု တစ္ခုထဲဆိုရင္ျဖင့္ အဖြင့္အပိတ္
ေကာ္မာထည့္စရာမလိုပဲ
စာလံု တစ္ခုထပ္ အထက္ဆိုရင္ျဖင့္ အဖြင့္အပိတ္ ႏွစ္ထပ္ေကာ္မာနဲ႔
၀ိုင္းေပးလိုက္ပါ၊ အထက္က Zawgyi-One က
စာလံုးႏွစ္လံုးေပါင္းထားတာ ျဖစ္တဲ့အတြက္
ႏွစ္ထပ္ေကာ္မာနဲ႔ ၀ိုင္းထားတယ္၊
Font Style
စာလံုးေတြကို စတိုင္ထည့္လို႔ရပါေသးတယ္၊ စာလံုး အထူျဖစ္လိုလား
စာလံုးတစ္ေစာင္းျဖစ္လိုလား၊ စသျဖင့္ေပါ့၊
စာလံုးေတြရဲ့ စတိုင္းကိုထည့္ဖို႔သံုးတဲ့ property ကေတာ့ font-style ပါ၊
တန္ဖိုးကေတာ့ ၾကိဳက္တဲ့ တန္ဖိုးကိုထည့္ bold, italic, oblique ဆိုတဲ့
စတိုင္သံုးမ်ိဳးရွိတယ္၊ bold နဲ႔ italic တို႔ကို ရင္ႏွီးျပီးသား ျဖစ္ႏိုင္ေပမယ့္
Oblique ကိုေတာ့ နည္းနည္း ထူးဆန္းေနလိမ့္မယ္၊ သူ႔ရဲ့ ပံုစံက italic နဲ႔
ဆင္တူပါတယ္၊ စာလံုး ေလးေတြေစာင္းေနတာပါပဲ၊ ေအာက္မွာဥပမာ ၾကည့္ပါ၊
ံHTML Document
<html>
<head>
<link href= "coder.css"
rel="stylesheet" type="text/css">
</head>
<body>
<h1> what is going on with you guys? </h1>
<p> hey now brown cow in down town </p>
<dive id="bla">Got a pocket full of cheese
and garden full of trees</div>
</body>
</html>
CSS File
h1 { font-style: bold;}
p { font-style: italic; }
#bla{font-style :oblique;}
အထက္က ဖိုင္ႏွစ္ခုကိုေပါင္းျပီး Run လိုက္ရင္ေတာ့ ေအာက္က ပံုစံမ်ိဳး
၀က္ဆိုက္စာမ်က္ႏွာကိုေတြ႔ရမယ္၊
စာလံုး အရြယ္အစားကိုလဲ လိုသလို ေျပာင္းလဲႏိုင္ပါတယ္၊
စာလံုး အရြယ္အစားကိုခ်ိန္ညွိဖို႔အတြက္သံုးတဲ့ property ကေတာ့
font-size ပါ၊ value မွာေတာ့
သင္ၾကိဳက္တဲ့ စာလံုး
အရြယ္အစားကိုထည့္ႏိုင္ပါတယ္။ ေအာက္မွာဥပမာ ၾကည့္
p { font-size: 20px; }
အထက္က ဥပမာက HTMl Document ထဲမွာရွိသမွ် paragraphs
ေတြအားလံုးထဲပါတဲ့ စာလံုး အရြယ္အစားကို 20px ထားမယ္လို႔ သတ္မွတ္လိုက္တာပါ၊
ကိုတိုင္စမ္းၾကည့္ပါ၊
Absolute size:
- Sets the text to a specified size
- Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
- Absolute size is useful when the physical size of the output is known
Relative size:
- Sets the size relative to surrounding elements
- Allows a user to change the text size in browsers
သင္ရဲ့ ၀က္ဆိုက္က စာလံုး အရြယ္အစားကို အေသျဖစ္ေစလိုတယ္၊
သင့္ဆိုက္ကို လာၾကည့္တဲ့ သူက မေျပာင္းေစခ်င္ဘူးဆိုရင္ေတာ့ pxiels အစား em ကိုသံုးႏိုင္ပါတယ္၊ 16px က 1em
နဲ႔ ညီမွ်ပါတယ္၊ ေအာက္မွာၾကည့္ပါ၊
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Use a Combination of Percent and Em
The solution that works in all browsers, is to set a default
font-size in percent for the <body> element:
Precent နဲ႔ Em ကိုတြဲျပီးသံုးႏိုင္ပါတယ္၊ ဒါဆိုရင္ေတာ့
browser အားလံုးမွာ ျပသနာမရွိပဲ သင့္၀က္ဆိုက္မွာ အသံုးျပဳထားတဲ့
အရြယ္အစားအားလံုးကိုေဖာ္ျပေပးမယ္၊
Example
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
ၤFont-Variant
|
စာလံုးအေသးျဖစ္ေနတဲ့ စာေၾကာင္းေတြကို စာလံုးအၾကီးျဖစ္ေအာင္
CSS ရဲ့ font-variant property သံုးျပီးေျပာင္းလိုက္ႏိုင္ပါတယ္၊ ေအာက္မွာဥပမာ
ၾကည့္ပါ၊
ံHTML Document
<html>
<head>
<title>what's up</title>
<link href= "baby.css" rel=
"stylesheet" type= "text/css">
</head>
<body>
<body>
<p class="normal">My name is Hege
Refsnes.</p>
<p class="small">My name is Hege
Refsnes.</p>
</body>
</html>
CSS File
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
အထက္က ဖိုင္ႏွစ္ခုကို Run ၾကည့္လိုက္ရင္ ေအာက္က ပံုစံ
၀က္ဆိုက္စာမ်က္ႏွာကိုရရွိမွာပါ၊
|
ဒုတိယ
စာပိုဒ္ကိုေရးထားတုန္းက စာလံုးအေသးနဲ႔ ေရးထားေပမယ့္ တကယ္ ၀က္ဆိုက္စာမွာေပၚေတာ့
စာလံုးအၾကီးေတြအေနနဲ႔ေပၚတယ္၊ ဒါကေတာ့ CSS
မွာ ဒုတိယ စာပိုဒ္ကို စာလံုး ကို
smaill-caps ဆိုျပီး capital ပံုႏွိပ္စာလံု အေသးစား ေျပာင္းလို႔
အမိန္႔ေပးထားလို႔ပါ၊
ဆက္ရန္ရွိ
No comments:
Post a Comment