EOT လုပ္ျခင္း
written by mmhelpdesk
at Friday, August 17, 2007
Contributor: ရန္ေအာင္
EOT ဆုိတာ ဘေလာ႔ဂါေတာ္ေတာ္မ်ားမ်ား ၾကားဖူးနား၀ ရွိေနၾကမွာပါ။ ဒါေပမယ္႔ လုပ္ပုံ လုပ္နည္း အတိအက်ကိုေတာ႔ ဘေလာ႔ဂါတုိင္း မသိၾကေသးပါဘူး။ အရင္တုန္းက ကုိေမာင္လွရဲ႔ ဘေလာ႔ဂ္မွာ EOT လုပ္နည္း ေျပာျပထားတာကုိ အားလုံးအသိပဲ ျဖစ္မွာပါ။ ကၽြန္ေတာ္လည္း သူ႔ပုိ႔စ္ကို ဖတ္ျပီးစမ္းၾကည္႔တာပါပဲ။ သူ႔ပုိ႔စ္ထဲမွာ ေတာ္ေတာ္ျပည႔္စုံျပီး သားပါ။ ခုကၽြန္ေတာ္ေရးေပးလုိက္တာကေတာ႔ ပုိျပီးေတာ႔ ရွင္းလင္းသြားေစလုိတဲ႔ ရည္ရြယ္ခ်က္နဲ႔ screenshot ေလးေတြ ထည္႔ေပးထားျပီး Step by step ျပန္ရွင္းျပထားတာပါပဲ ခင္ဗ်ာ..
EOT ဆုိတာကေတာ႔ Embedded Open Type ရဲ႔ Acronym အတုိေကာက္စကားလုံးပါ။ သူ႔ရဲ႔ Definition ကုိ ဒီလုိဖြင္႔ဆုိပါတယ္။
Font embedding has been a feature of Microsoft applications, such as Word and PowerPoint®, for several years. It allows the fonts used in the creation of a document to travel with that document, ensuring that a user sees documents exactly as the designer intended them. Font embedding technology is built into Microsoft Internet Explorer (version 4 and above), bringing embedded fonts to the Web.
အေသးစိတ္ကုိ ဒီမွာ ဖတ္ပါ။
မူရင္းရည္ရြယ္ခ်က္ကေတာ႔ ကုိယ္တင္ျပထားတဲ႔ ဒီဇုိင္းေဖာင္္႔ပုံစံေတြကုိ ၾကည္႔ရႈသူရဲ႔ စက္ထဲမွာ Download လုပ္ထားစရာမလုိဘဲ ဒီတုိင္းဖတ္ရႈႏုိင္ေအာင္ လုပ္ထားတဲ႔ နည္းပညာပါပဲ။ ဒီေနရာမွာ Sample Font ေလးေတြကုိ ၾကည္႔ၾကည္႔ပါ။ အဲဒီ႔ေဖာင္႔ေတြ ကၽြန္ေတာ္တုိ႔စက္ထဲမွာ ထည္႔မထားေပမယ္႔ စာေရးသူျမင္ေစခ်င္တဲ႔အတုိင္း ကၽြန္ေတာ္တုိ႔ ျမင္ေနရပါတယ္။ အဲဒါ EOT ပါပဲ။
ဥပမာေဖာင္႔႔ေလးေတြကုိ ဒီမွာ ေလ႔လာႏုိင္ပါတယ္။
ကၽြန္ေတာ္တုိ႔ ဘေလာ႔ဂ္ေတြေရးေတာ႔ ေဇာ္ဂ်ီေဖာင္႔ကုိ သုံးၾကတယ္။ ေရးသူအတြက္ ဘာမွျပႆနာမရွိေပမယ္႔ ဖတ္သူမွာ ေဖာင္႔မရွိရင္ ကူးယူေနရတာ သူ႔အတြက္ အခ်ိန္ ကုန္ပါတယ္။ ကရိကထမ်ားပါတယ္။ ျပီးေတာ႔ စက္ေနာက္တစ္လုံး ေျပာင္းသံုး တာပဲျဖစ္ျဖစ္၊ ေနာက္တစ္ေနရာရာကုိ သြားလုိ႔ အဲဒီ႔ေနရာက စက္ကုိ သံုးတာပဲျဖစ္ျဖစ္ ေဖာင္႔ကုိ တစ္ခါထပ္ျပီး Download လုပ္ရျပန္ေရာ။ တစ္ခ်ိဳ႔ Network ေတြက စက္ေတြ (ေက်ာင္း၊ရုံး) မွာ ဆုိရင္ Download လုပ္ရတာ အဆင္မေျပတာ ေလးေတြပါ ရွိတတ္ ပါတယ္။ ဘာကုိမွ Download ေပးမလုပ္ေအာင္ လုပ္ထားတာမ်ိဳး ေလးေတြလည္း ရွိတတ္ပါတယ္။ ဒါေၾကာင္႔ ဘာျဖစ္လုိ႔ EOT လုပ္သင္႔သလဲ ဆုိရင္ ဖတ္ရႈသူအဆင္ေျပ ေစလုိတဲ႔ ေစတနာေၾကာင္႔ပါပဲလုိ႔ ေျဖရပါမယ္။
ကဲ.စလုိက္ၾကရေအာင္လားဗ်ာ.
ပထမဦးဆုံး Microsoft က ထုတ္လုပ္ထားတဲ႔ WEFT ဆုိတဲ႔ Software ကုိ Download လုပ္ရပါမယ္။ ဒီေနရာမွာ Download လုပ္ပါ။ .EXE File ကုိ Run ျပီး Install လုပ္ပါ။
Program ကုိ စျပီးေတာ႔ မ run ခင္မွာ EOT အတြက္ Web Page ေလး တစ္ခု အၾကမ္း ဖ်င္း တည္ေဆာက္ပါမယ္။ နာမည္ကုိလည္း လြယ္ကူစြာပဲ eot.htm လုိ႔ေပးပါမယ္။ ဒီေအာက္မွာ ေရးထားတဲ႔ Coding ေလးေတြကုိ Notepad ထဲမွာ ရုိက္ျပီး Save လုပ္လုိက္ ပါ။ Notepad ဘယ္မွာ ရွိလဲဆုိတာ မသိေသးရင္လည္း ေျပာျပပါဦးမယ္။
Start > Programs > Accessories ထဲမွာ ရွာၾကည္႔ပါ။ Notepad ေရာ Wordpad ေရာ ေတြ႔ပါလိမ္႔မယ္။
အဲဒီ႕ Notepad ထဲမွာ ေအာက္ပါအတုိင္း webpage ေလးတစ္ခုကို အစမ္းတစ္ခု တည္ေဆာက္ပါမယ္။
<HTML>
<BODY>
<FONT FACE=Zawgyi-One SIZE=10> a b c d e f g </FONT>
<FONT FACE=Zawgyi-One SIZE=10><i> a b c d e f g </i></FONT>
<FONT FACE=Zawgyi-One SIZE=10><b> a b c d e f g </b></FONT>
<FONT FACE=Zawgyi-One SIZE=10><b><i> a b c d e f g </b></i></FONT>
</BODY>
</HTML>
စာေၾကာင္းေလးေၾကာင္း ရုိက္ထားတာက Normal, Italic, Bold, Bold Italic Style ေလးခုအတြက္ပါ။ ဒါေၾကာင္႔လည္း EOT အတြက္ WEFT Program ကုိ Run ရင္ ဖုိင္ ၄ ဖုိင္ ရလာပါလိမ္႔မယ္။ ေဇာ္ဂ်ီေဖာင္႔ကုိ ထည္႔မွာျဖစ္လုိ႔ ေဇာ္ဂ်ီေဖာင္႔ကုိ ေၾကျငာျပီး စာရုိက္ထား တာ သတိထားမိမွာပါ။ ဥာဏ္ရွိသလုိသုံးလုိ႔ရပါတယ္။ တစ္ျခား ကုိယ္႔ဘာသာကုိယ္ ရွာေတြ႔ထားတဲ႔ ေဖာင္႔ပုံစံေလးေတြ လုပ္ခ်င္တယ္ ဆုိရင္လည္း ဒီတုိင္းပဲ ေၾကျငာျပီး လုပ္လုိ႔ရပါတယ္။ ကုိယ္႔စက္ထဲမွာေတာ႔ ေဇာ္ဂ်ီေဖာင္႔ကုိ ပထမဦးဆုံး သြင္းထားဖုိ႔လုိပါတယ္။
(Font သြင္းနည္း စကားခ်ပ္)
လုိခ်င္တဲ႔ Font ကို Download လုပ္ပါ။ My Computer>C: Drive ထဲက Windows ထဲကုိ သြားပါ။ အဲဒီ႔ထဲကမွ Fonts ဆုိတဲ႔ Folder ထဲမွာ မိမိ Download လုပ္ထားတဲ႔ Font ကုိ Save လုပ္လုိက္ရုံပါပဲ။)
ကဲ. ျပီးသြားရင္ေတာ႔ ခုနက တည္ေဆာက္ထားတဲ႔ Web Page ေလးကို Save လုပ္လုိက္ ပါ။ eot.html လုိ႔ပဲ လြယ္လြယ္ပဲ နာမည္ေပးလုိက္ရေအာင္။
ပထမအဆင္႔ webpage တည္ေဆာက္ျခင္းျပီးသြားပါျပီ။ ဒါကုိ ယူသံုးပါေတာ႔မယ္။
Download လုပ္ထားခဲ႔တဲ႔ WEFT Program ကို Run ပါ။ နာမည္နဲ႔ Email Address တစ္ခု ရိုက္ထည္႔ေပးလုိက္ပါ။ Register လုပ္တဲ႔ ပုံစံေလးပါပဲ။ ဘာမွ မဟုတ္ပါဘူး။
ေရွ႔ဆက္ျပီး ဘာမွမလုပ္ခင္ WEFT Program ကုိ ကုိယ္႔စက္ထဲက Font ေတြအေၾကာင္း Update လုပ္ေပးဖုိ႔လုိပါတယ္။ ပထမဦးဆုံးအၾကိမ္ Run ရင္ေျပာတာပါ။ ကၽြန္ေတာ႔္တုန္း က အၾကိမ္ၾကိမ္ Run ေပမယ္႔ Font မေပၚလာတဲ႔ ျပႆနာ ၾကံဳခဲ႔ရပါတယ္။ ကၽြန္ေတာ္ ေျမစမ္းခရမ္းပ်ိဳး ခဲ႔ရတဲ႔ အရင္းအႏွီးတစ္ခုပါပဲဗ်ာ။ ဘယ္လုိ update လုပ္ရလဲ ဆုိေတာ႔ Menu Bar ထဲက Tools ကုိ သြားပါ။ ျပီးေတာ႔ Update Font DB ဆုိတာကုိ ေရြးလုိက္ပါ။ ပုံမွာ ျပထားတာကုိ ၾကည္႔ပါခင္ဗ်ာ။
Font Update လုပ္ျပီးသြားရင္ေတာ႔ စလုိ႔ရပါျပီ။ New ကုိ ေရြးပါ။ ဒီပုံစံေလး ေပၚလာပါ လိမ္႔မယ္။
ေနာက္တစ္ဆင္႔အေနနဲ႔ EOT လုပ္မယ္႔ File ကုိ Add လုပ္ပါမယ္။ Connection ျမန္တဲ႔ ေနရာေတြကဆုိရင္ေတာ႔ ကုိယ္႔ရဲ႔ Website URL ကုိ တစ္ခါတည္း ေကာက္ထည္႔လုိက္ရုံ ပါပဲ။ ကၽြန္ေတာ္ အဲဒီ႔အတုိင္းလည္း စမ္းၾကည္႔ဖူးပါတယ္။ အလုပ္လုပ္ပါတယ္။ ဒါေပမယ္႔ အခ်ိန္အရမ္းၾကာပါတယ္။ သူက ေနာက္ဆုံးတင္ထားတဲ႔ ဘေလာ႔ဂ္ပုိ႔စ္အထိပဲ update လုပ္ေပးသြားပါတယ္။ ေနာက္ထပ္တင္တဲ႔ ပုိ႔စ္ေတြအတြက္ ျပန္ run ေပးေနရတာမ်ိဳး ျဖစ္ေနပါတယ္။ Website ဆုိတာမ်ိဳးကေတာ႔ Static Page ျဖစ္လုိ႔ သိပ္ျပီးေတာ႔ အေျပာင္း အလဲ မလုပ္တတ္ၾကဘူး။ ခုလိုမ်ိဳး တုိက္ရုိက္ URL ထည္႔ျပီး ညႊန္းလုိက္တာ ျပႆနာမရွိပါဘူး။ ဘေလာ႔ဂ္ေတြက်ေတာ႔ Dynamic Page ပါ။ အျမဲတမ္း ရွင္သန္ ေျပာင္းလဲေနတာပါ။ ဒါေၾကာင္႔ Address ကုိ တုိက္ရုိက္ညႊန္းတာထက္ မိမိစက္ ထဲမွာ အစမ္းတည္ေဆာက္ထားတဲ႔ Web Page ေလးကုိ ညႊန္းျပီးမွ လုိခ်င္တဲ႔ Site ေတြကို ထပ္ျပီး Add လုပ္သြားတာ ပိုအဆင္ေျပပါတယ္ခင္ဗ်ာ။
ဒီေနရာမွာလည္း File တင္တာမွာ Trick ေလးေတြ ရွိပါေသးတယ္။ သတိထားမိရင္ ျမင္မွာပါ။ ေဘးနားက Dropdown Menu ေလးထဲမွာ http://, https://, file://, ftp:// ဆိုျပီး ရွိပါတယ္။ ကၽြန္ေတာ္တုိ႔က စက္ထဲက File ကုိ တင္မွာျဖစ္လုိ႔ file:// ကုိေရြးပါမယ္။ မဟုတ္ရင္ေတာ႔ ဘယ္ေတြေရာက္လုိ႔ ေရာက္ကုန္မွန္း မသိျဖစ္ကုန္ပါလိမ္႔မယ္။
Desktop ေပၚမွာ Save လုပ္ထားတဲ႔ eot.html ေလးကို ေရြးလုိက္ပါ။ ဒီလုိျမင္ရပါလိမ္႔မယ္ ခင္ဗ်ာ။
Next ကို ဆက္ႏွိပ္ပါ။ ေနာက္တစ္ဆင္႔ဆက္ႏွိပ္ပါ။ ဒီပုံစံ ျမင္ရပါလိမ္႔မယ္။
အေပၚဆုံးက subsetting ထဲမွာ No. 7 No. Subsetting ကုိ ေရြးလုိက္ပါ။ Next ကို ဆက္ႏွိပ္ပါ။ ဒီပုံစံျမင္ရပါလိမ္႔မယ္။
ဒီအဆင္႔မွာ ကုိယ္ထည္႔ခ်င္တဲ႔ Site ေတြရဲ႔ URL Address ေတြကုိ ထည္႔ဖုိ႔ပါပဲ။ Edit ကုိႏွိပ္လုိက္ပါ။ အဲဒီ႔မွာ ကၽြန္ေတာ္ EOT လုပ္ေပး ထားတဲ႔ Site ေတြရဲ႔ Address ေတြကုိ ေတြ႔ရပါလိမ္႔မယ္။ ဒီပုံမွာ ေလ႔လာႏုိင္ပါတယ္။
လိပ္စာကုိ ရုိက္ထည္႔ရင္ http://yourblog.blogspot.com လုိ႔လည္းရုိက္ပါ။ http://www.yourblog.blogspot.com လုိ႔လည္း ရိုက္ေပးပါ။ ဘာလုိ႔လဲဆုိေတာ႔ User တစ္ခ်ိဳ႔က www ဆုိတာနဲ႔ရုိက္၀င္သလုိ တစ္ခ်ိဳ႔ကေတာ႔ http:// နဲ႔ ရုိက္၀င္တတ္တာမုိ႔လုိ႔ ၂ မ်ိဳးလုံးရေအာင္လုိ႔ပါ။
ဒီထဲမွာပဲ သူငယ္ခ်င္းေတြရဲ႔ ဘေလာ႔ဂ္ Address ေတြကို ထည္႔ျပီး EOT လုပ္ေပးမယ္ ဆုိလည္း ရပါတယ္။ ဒီေလာက္ဆုိ ျမင္ေလာက္ျပီထင္ပါတယ္။
လိပ္စာေတြကို ထည္႔ျပီးေတာ႔ ေနာက္တစ္ဆင္႔ မသြားခင္မွာ Show CSS @font-family declarations ဆုိတဲ႔ Box ေလးကို Tick လုပ္ေပးခဲ႔ပါ။
ျပီးရင္ေတာ႔ Next ကုိႏွိပ္ပါေတာ႔။ ခဏေစာင္႔ေနပါ။ ျပီးရင္ဒီလုိေလး ျမင္ရပါလိမ္႔မယ္။
အဲဒီ႔ထဲက ျမင္ရတဲ႔ CSS Code ေလးေတြကို ကူးယူျပီး Word ထဲမွာ Save လုပ္ထားလုိက္ပါ။ WEFT Program ကုိ Next ေတြ ဆက္ႏွိပ္သြားလုိက္ပါ။ Finish ဆုိတာကုိ ေရာက္သြားရင္ အားလုံး ျပီးတဲ႔ အဆင္႔ပါပဲ။
ျပီးသြားရင္ေတာ႔ Desktop ေပၚမွာ လွမ္းၾကည္႔လုိက္ပါဦး။ EOT အတြက္ ဖုိင္ ၄ ဖုိင္ ေရာက္ေနတာကုိ ဒီလုိေတြ႔ရပါလိမ္႔မယ္။
ေနာက္တစ္ဆင္႔ကေတာ႔ ကၽြန္ေတာ္တုိ႔ ရထားတဲ႔ EOT Files ေတြကို File Hosting Site တစ္ခုခုမွာ တင္ေပးဖုိ႔လုိပါတယ္ခင္ဗ်ာ။ File Hosting Site ဆုိတာကေတာ႔ မိမိလုိခ်င္တဲ႔ ဖုိင္ကုိတင္ျပီး URL ထုတ္ေပးေသာ Site ကို ဆုိလုိပါတယ္။ အမ်ားစုကေတာ႔ www.fileden.com , www.ripway.com တုိ႔ကို အသုံးမ်ားေပမယ္႔ ျမန္မာႏိုင္ငံက လူငယ္အမ်ားစုအတြက္ Googlepages ကုိ သုံးဖုိ႔ တုိက္တြန္းပါတယ္။
ဖုိင္ ၄ ဖုိင္လုံးကုိ File Hosting Site မွာ တင္ျပီး URL Address ကုိ ယူပါ။ ရလာတဲ႔ URL Address ေတြကို ခုနက Save လုပ္ထားတဲ႔ File ထဲက ZawgyiOne File အသီးသီး ေနရာမွာ ျပန္အစားသြင္းေပးပါ။
ဥပမာ src: url(ZAWGYIO3.eot);
ဆုိတဲ႔ေနရာမွာ
Src: url(http://h1.ripway.com/yanaung/ZAWGYIO3.eot);
လုိ႔ျပင္ရိုက္ေပးပါ။ လိပ္စာကေတာ႔ File Hosting Site ကထုတ္ေပးတဲ႔ URL ပါခင္ဗ်ာ။ အဲဒါေတြကို တစ္ခုခ်င္း ျပန္အစားသြင္းျပီးရင္ ကုိယ္႔ရဲ႔ ဘေလာ႔ဂ္ထဲက Template ထဲမွာ သြားထည္႔ေပးရပါမယ္။
ေနာင္ကုိလည္း ျပင္ရလြယ္ေအာင္၊ ရွာရတာလည္း လြယ္ေအာင္၊ စုစုစည္းစည္းေလးလည္း ျဖစ္ေအာင္ Variable Definitions ဆုိတဲ႔ Code ေတြရဲ႔ ေအာက္မွာ ကပ္လ်က္ EOT CSS Code ေတြကို ကူးထည္႔ေပးလုိက္ပါမယ္။
ကၽြန္ေတာ္လုပ္ထားတဲ႔ ဥပမာေလးကုိ ၾကည္႔ပါခင္ဗ်ာ။
.
.
.
<Variable name="postTitleFont" description="Post Title Font" type="font"
default="normal bold 135% 'Zawgyi-One', Georgia, Times New Roman, Tahoma, Arial, sans-serif">
*/
/* EOT
------------------------------ */
<STYLE TYPE="text/css">
@font-face {
font-family: Zawgyi-One;
font-style: normal;
font-weight: normal;
src: url(http://h1.ripway.com/yanaung/ZAWGYIO4.eot);
}
@font-face {
font-family: Zawgyi-One;
font-style: normal;
font-weight: 700;
src: url(http://h1.ripway.com/yanaung/ZAWGYIO3.eot);
}
@font-face {
font-family: Zawgyi-One;
font-style: oblique;
font-weight: 700;
src: url(http://h1.ripway.com/yanaung/ZAWGYIO2.eot);
}
@font-face {
font-family: Zawgyi-One;
font-style: oblique;
font-weight: normal;
src: url(http://h1.ripway.com/yanaung/ZAWGYIO1.eot);
}
.
.
.
Template ကို Save လုပ္လုိက္ပါ။
ဒါဆုိ EOT လုပ္နည္းျပီးပါျပီ။
မွတ္ခ်က္
၁. EOT သည္ IE Browser အတြက္သာ ျဖစ္သည္။ Firefox အတြက္ဆုိလွ်င္ Font Download လုပ္ရန္ လုိျမဲလုိေနပါေသးသည္။
၂. EOT လုပ္ရာတြင္ ေနာက္ထပ္ျဖည္႔စြက္ေသာ Blog Address မ်ားအတြက္ လိပ္စာရုိက္ထည္႔ေပးရုံျဖင္႔ EOT ျဖစ္မသြားပါ။ အသစ္ထြက္လာေသာ Zawgyi Font File မ်ားကုိ Hosting Site သုိ႔ ျပန္တင္ခါ URL ေနရာတြင္ ယခင္နည္းအတုိင္း ျပန္လည္ အစားသြင္းရမည္႔ အဆင္႔ကို လုပ္ရန္လုိျမဲလုိပါေသးသည္။
March 22, 2008 at 12:36 PM
neo template အတြက္ eot လုပ္ရတာ အဆင္မေျပဘူး ျဖစ္ေနပါတယ္... coding ထည့္ရမယ့္ေနရာေလး နည္းနည္းပိုရွင္းလင္းေအာင္ ေျပာျပေပးပါလားဗ်ိဳ႕... ဒီ post ကိုဖတ္ရတာေတာ္ေတာ္ ၾကိဳက္ပါတယ္သည္ but eot လုပ္ရတာအဆင္မေျပေသးေတာ့ စိတ္ေတာ့မေကာင္းပါ။ ေနာက္ျပီး IE brower အတြက္ပဲဆိုသည္မွာ ယခုထိေကာ သည္အတိုင္းပဲလား firefox အတြက္ font အျမဲသြင္းေပးေနရတုန္းပဲလား ဆိုတာသိခ်င္ပါသည္။
May 31, 2008 at 2:00 PM
ကြ်န္ေတာ္အစအဆုံးလုပ္သြားၾကည့္တယ္။ ဒါေပမဲ့ မရဘူးဗ်... template ေပၚတင္ေတာ့ save လုပ္တာမရဘူး။
ဒီမွာၾကည့္ၾကည့္ပါ္။
http://uploads.screenshot-program.com/upl6958792312.png
February 13, 2009 at 4:02 AM
အကိုႀကီးေရ အဲဒီ error တက္လာတယ္ ဘာဆက္လုပ္ရမလဲဟင္
Invalid variable declaration in page skin: Variable is used but not defined. Input: WEFT