WOFF font embedding

ဟိုတစ္ေန့က လြင္မိုးညြွန္းတာေျကာင့္ woff ဆိုတာကို စမ္းျကည့္ျဖစ္တယ္။
woff ဆိုတာ ကြ်န္ေတာ္တို့ စာမ်က္နွာမွာ သံုးထားတဲ့ fontဟာ စာဖတ္သူေတြရဲ့ စက္မွာမရွိလည္း ရေအာင္ ပါ။
font file ကို ဒီ page ေတြမွာ embed လုပ္တာကို ေျပာတာ။

အရင္က ကြ်န္ေတာ္တို့ zawgyi သံုးခါစက eot နဲ့ သံုးခဲ့တဲ့ ဟာမ်ိုးပဲ။
eot, svg, sIFR, otf/ttf ေတြျပီးေတာ့ ဒါ ေနာက္ဆံုးေပါ္ပဲ။ firefox 3.6 နဲ့ သံုးလို့ရျပီ။ တျခား browser ေတြလည္း ေနာက္ version ေတြမွာ ရလာမွာပါ။
ထူးတာက ဒီ woffက file size အရမ္း ေသးတယ္။ padauk font ကို woff ေျပာင္းလိုက္တာ 91.5 KB ပဲရွိတယ္။ connection ေနွးေနွးမွာ ေအးေဆးပဲ ။

woff လုပ္ရတာလည္း အရမ္းအရမ္း လြယ္တယ္။
ဒီကေန sfnt2woff.exeကို downloadလုပ္။
ဥပမာ padauk.ttf ကို ေျပာင္းမယ္ဆို... sfnt2woff.exe file ေလးကို padauk.ttf နဲ့အတူ folder တစ္ခုထဲမွာ အတူတူထား။
commend line ကေန sfnt2woff.exe Padauk.ttf ဆိုျပီး enter ေခါက္္လိုက္။
"၀ွစ္" ခနဲဆို Padauk.woff ထြက္လာေရာ။

commend line မသံုးတတ္ရင္ ဒီလိုလုပ္။
notepad ကိုဖြင့္လိုက္။
sfnt2woff.exe Padauk.ttf ဆိုျပီးရိုက္။
whatever.bat ဆိုျပီး ခုနက folder ထဲမွာ သိမ္း။
ျပီးရင္ အဲဒီ whatever.bat ကို run လိုက္ရံုပဲ။

file ကို upload လုပ္ ျပီးရင္ CSS မွာ

@font-face {
font-family: Padauk;
/* Works only in WOFF-enabled browsers */
src: url(Padauk.woff) format("woff");
}
ဆိုတာေလး (URL file path မွန္ေအာင္ေရးျပီး) ျဖည့္ေရးေပးလိုက္ပါ။
ျပီးပါျပီ။ :)
PS: if you are using WinXP-SP2 and older, Uniscribe in your system may not render Unicode 5.1 fonts properly.
Hope This Helps!!!

Unicode Version

ဟိုတစ်နေ့က လွင်မိုးညွှန်းတာကြောင့် woff ဆိုတာကို စမ်းကြည့်ဖြစ်တယ်။
woff ဆိုတာ ကျွန်တော်တို့ စာမျက်နှာမှာ သုံးထားတဲ့ fontဟာ စာဖတ်သူတွေရဲ့ စက်မှာမရှိလည်း ရအောင် ပါ။
font file ကို ဒီ page တွေမှာ embed လုပ်တာကို ပြောတာ။

အရင်က ကျွန်တော်တို့ zawgyi သုံးခါစက eot နဲ့ သုံးခဲ့တဲ့ ဟာမျိုးပဲ။
eot, svg, sIFR, otf/ttf တွေပြီးတော့ ဒါ နောက်ဆုံးပေါ်ပဲ။ firefox 3.6 နဲ့ သုံးလို့ရပြီ။ တခြား browser တွေလည်း နောက် version တွေမှာ ရလာမှာပါ။
ထူးတာက ဒီ woffက file size အရမ်း သေးတယ်။ padauk font ကို woff ပြောင်းလိုက်တာ 91.5 KB ပဲရှိတယ်။ connection နှေးနှေးမှာ အေးဆေးပဲ ။

woff လုပ်ရတာလည်း အရမ်းအရမ်း လွယ်တယ်။
ဒီကနေ sfnt2woff.exeကို downloadလုပ်။
ဥပမာ padauk.ttf ကို ပြောင်းမယ်ဆို... sfnt2woff.exe file လေးကို padauk.ttf နဲ့အတူ folder တစ်ခုထဲမှာ အတူတူထား။
commend line ကနေ sfnt2woff.exe Padauk.ttf ဆိုပြီး enter ခေါက်လိုက်။
"ဝှစ်" ခနဲဆို Padauk.woff ထွက်လာရော။

commend line မသုံးတတ်ရင် ဒီလိုလုပ်။
notepad ကိုဖွင့်လိုက်။
sfnt2woff.exe Padauk.ttf ဆိုပြီးရိုက်။
whatever.bat ဆိုပြီး ခုနက folder ထဲမှာ သိမ်း။
ပြီးရင် အဲဒီ whatever.bat ကို run လိုက်ရုံပဲ။

file ကို upload လုပ် ပြီးရင် CSS မှာ

@font-face {
font-family: Padauk;
/* Works only in WOFF-enabled browsers */
src: url(Padauk.woff) format("woff");
}
ဆိုတာလေး (URL file path မှန်အောင်ရေးပြီး) ဖြည့်ရေးပေးလိုက်ပါ။
ပြီးပါပြီ။ :)
PS: if you are using WinXP-SP2 and older, Uniscribe in your system may not render Unicode 5.1 fonts properly.
Hope This Helps!!!