Font Embed in Firefox 3.5

Font Embed in Firefox 3.5

• July 29, 2009 – 10:27 am
• Posted in နည္းပညာမ်ား

အရင္က စမ္းမယ္ စမ္းမယ္နဲ႕ မစမ္းျဖစ္လုိက္ဘူး.. ဒီေန႕မွပဲ စမ္းျဖစ္တာ….

ကၽြန္ေတာ္တုိ႕ေတြ web design ေတြဆြဲတဲ့အခါမွာ font ေတြကလည္း အေရးပါလွပါတယ္။ header ကို ဘာ font သံုးမယ္။ paragraph ကို ဘာ font သံုးမယ္ဆိုျပီး ကၽြန္ေတာ္တို႕ေတြ ေရြးခ်ယ္ရတယ္။ အရင္က ကၽြန္ေတာ္တို႕ေတြမွာ ေရြးခ်ယ္စရာ မ်ားမ်ားမရိွဘူး။ Windows မွာ default ပါတဲ့ font နဲ႕ mac မွာ default ပါတဲ့ font ေတြျဖစ္ဖုိ႕ အေရးၾကီးတယ္။ ေနာက္မို႕ဆို ကိုယ့္ design က မလွပဲ ျဖစ္သြားမယ္။ ဒါေၾကာင့္ အမ်ားအားျဖင့္ Verdana,Times New Roman,Tahoma,Arial,Georgia စတာေတြေလာက္ပဲ ေရြးလို႕ရတယ္။ အမ်ားၾကီးေရြးခ်ယ္စရာမရိွဘူးေလ။ သူတုိ႕ စက္ထဲမွာ font မရိွရင္ အလကားပဲ။ ဒါေၾကာင့္ designer ေတြကေတာ့ browser ေတြထဲမွာ font embed ျဖစ္ေစခ်င္ၾကတယ္။

ေနာက္ျပီး ကၽြန္ေတာ္တုိ႕ ျမန္မာေတြ ေဇာ္ဂ်ီ စက္ထဲမွာ မရိွလို႕ မျမင္ရဘူး။ ျမန္မာ ၂ မရိွလုိ႕မျမင္ရဘူး။ ျမန္မာ ၃ မရိွလို႕ မျမင္ရဘူး။ အဲလို ျပႆနာေတြ က ခဏခဏပါပဲ။ eot ကလည္း IE အတြက္ပဲရတယ္ေလ။ ဒါေၾကာင့္ အဆင္မေျပျပန္ဘူး။ ႏိုင္ငံတကာမွာလည္း သူတို႕ ဘာသာစကားေတြကို default ပါတဲ့ font မဟုတ္ပဲနဲ႕ အျခား ကိုယ္ပိုင္ design font ေတြနဲ႕လည္း ထည့္သြင္းေဖာ္ျပေစခ်င္တာပဲ။ ဒါေပမယ့္ user စက္ထဲမွာ font မသြင္းထားရင္လည္း မျဖစ္ျပန္ဘူးေလ။

firefox 3.5 , safari 3.1 , opera 10 မွာ အဲဒီ ျပႆနာေတြ ခ်ဳပ္ျငိမ္းေအာင္ ဖန္တီးလာႏိုင္ပါျပီ။ ကၽြန္ေတာ္တို႕ေတြ css နဲ႕ font embed လုပ္လို႕ရလာျပီ။ ဘယ္လိုလုပ္မလဲဆိုေတာ့

@font-face {
font-family: a-remote-font-name;
src: source [,source]*;
[font-weight: weight];
[font-style: style];
}

a-remote-font-name ဆိုတာကေတာ့ font နာမည္ေပါ့။
source သူကေတာ့ font ရဲ႕ source ေပါ့။ user စက္ထဲက ဟာကို ယူသံုးခ်င္ရင္ local("Font Name") နဲ႕ ေခၚလုိ႕ရတယ္။
ေနာက္ထပ္ ႏွစ္ခုျဖစ္တဲ့ font-weight နဲ႕ font-style ကေတာ့ optional ပါ။ font weight value နဲ႕ style value ထည့္ေပးရံုပဲေလ။ သူတုိ႕ ၂ လိုင္းကို မထည့္လည္းရတယ္။ [1]  ကဲ.. example ေလး ၾကည့္ရေအာင္။

အဲဒါကေတာ့ css/style.css ေပါ့။
view plaincopy to clipboardprint?

1. @font-face
2. {
3. font-family:Zawgyi-one;
4. src:url(ZawgyiOne2008.ttf);
5. }
6. body
7. {
8. font-family: Zawgyi-one;
9. color:#343434;
10. }

@font-face
{
font-family:Zawgyi-one;
src:url(ZawgyiOne2008.ttf);
}
body
{
font-family: Zawgyi-one;
color:#343434;
}

အဲဒါကို HTML မွာ ျပန္ေခၚေတာ့
view plaincopy to clipboardprint?

1. <link rel="stylesheet" type="text/css" href="css/style.css">
2.
3.
4. ေနေကာင္း

ေနေကာင္း

အဲဒါကို ဘာ font မွ မလုိပဲ ေဇာ္ဂ်ီ ေပၚပါတယ္။ အဓိကေတာ့ @font-face ကအဓိကပါပဲ။ တကယ္လို႕ လိပ္စာနဲ႕ေခၚခ်င္ရင္ေတာ့ src မွာ
view plaincopy to clipboardprint?

1. @font-face
2. {
3. font-family:Zawgyi-one;
4. src:url(http://www.saturngod.net/ZawgyiOne2008.ttf);
5. }

@font-face
{
font-family:Zawgyi-one;
src:url(http://www.saturngod.net/ZawgyiOne2008.ttf);
}

ဒါဆိုရင္ font ကို သြား download ခ်စရာမလိုပဲ browser ကပဲ သူ႕ဘာသာသူ embed လုပ္ျပီး ျပေပးမွာပါ။ တနည္းေျပာရင္ font မရိွလည္း ၾကည့္လုိ႕ရပါတယ္။ ဒါဟာ web designer ေတြအတြက္ အရမ္းေကာင္းမြန္တဲ့ အခ်က္ေလးပါပဲ။ ေလ့လာခ်င္ေသးတယ္ဆိုရင္ေတာ့

https://developer.mozilla.org/index.php?title=En/CSS/%40font-face

မွာ သြားျပီး ဖတ္ႏိုင္ပါတယ္ဗ်ာ။