CSS_7


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
  • RemarkIf you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).


သင္ရဲ့ ၀က္ဆိုက္က စာလံုး အရြယ္အစားကို အေသျဖစ္ေစလိုတယ္၊ သင့္ဆိုက္ကို လာၾကည့္တဲ့ သူက မေျပာင္းေစခ်င္ဘူးဆိုရင္ေတာ့  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 */

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;}


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 ပံုႏွိပ္စာလံု အေသးစား ေျပာင္းလို႔ အမိန္႔ေပးထားလို႔ပါ၊
ဆက္ရန္ရွိ

Youtube Channelေလးကို Subscribeေလးႏွိပ္ထားေပးေနာ္




ပါ၀င္ေရးသားၾကသူမ်ာ.....

ေရာင္ျပန္ေလး(ေရာင္ျပန္ေလးနည္းပညာ)


No comments

Powered by Blogger.