ဒီပို႔စ္ကေတာ့ ကၽြန္ေတာ္ သိလြန္းတက္လြန္းလို႔ ေရးသားတာ မဟုတ္ဘူးဆိုတာကို ပထမဆုံး ေျပာပါရေစ။
ကၽြန္ေတာ္လည္း ဟိုနားရွာ၊ ဒီနားရွာ ကိုဂူဂယ္လ္ကို ဒုကၡေပးလိုက္၊ ျမန္မာဆိုဒ္ေတြကို လိုက္ၾကည့္လိုက္ နည္းလမ္းတစ္ကာကို လိုက္စမ္းရင္းနဲ႔ နဲနဲအဆင္ေျပေသာ နည္းလမ္းကို ေတြ႕မိလို ျပန္လည္း မၽွေဝလိုက္ပါတယ္။
ေဖာင့္နည္းပညာမွာ နာမည္ႀကီးေသာ ကိုေစတန္ဆီလည္း ေရာက္ခဲ့ပါတယ္။
ေနာက္ဆုံးေတာ့ ဘေလာ့ဂ္ဂါတစ္ေယာက္အေနနဲ႔ မိမိစိတ္ႀကိဳက္ ေဖာင့္ကို ဘေလာ့ဂ္မွာ တပ္ဆင္ဖို႔နည္းလမ္းကို လိုအပ္လာနိုင္တာမို႔ ကိုယ္ဘာသာ Font Embed ျပဳလုပ္နိုင္ေသာ နည္းလမ္းေလးကို ကၽြန္ေတာ္ရွာေတြလာပါတယ္။
ဘေလာ့ဂ္ဂါအေတာ္မ်ားမ်ားကို သိရွိေသာ Custom CSS ကို အသုံးျပဳေသာ နည္းလမ္းပဲျဖစ္ပါတယ္။
ကၽြန္ေတာ္ေတြ႕ခဲ့ေသာ နည္းလမ္းကေတာ့ ဘယ္ Blogging Platform မွာပါ အဆင္ေျပနိုင္ပါလိမ့္မယ္လို႔ထင္ပါတယ္။
ကၽြန္ေတာ္ကေတာ့ Blogspot မွာပဲ စမ္းသပ္ထားပါတယ္။
Font Embed ျပဳလုပ္ဖို႔ Font Files ေလးခု လိုအပ္ပါတယ္။
ဉပမာ။ ။ Myanmar3 Font အတြက္ဆိုရင္ Myanmar3.ttf , Myanmar3.eot , Myanmar3.woff , Myanmar3.svg တို႔ပဲ ျဖစ္ပါတယ္။
ေဇာ္ဂ်ီအတြက္ဆိုရင္ေတာ့ Zawgyi-One.ttf , Zawgyi-One.eot , Zawgyi-One.woff , Zawgyi-One.svg တို႔ပဲ ျဖစ္ပါတယ္။
ဒီေန႔အခ်ိန္မွာဆိုရင္ ကၽြန္ေတာ္တို႔ ျမန္မာေတြအတြက္က ေဖာင့္အမ်ိဳးအစား အေတာ္မ်ားမ်ားကို ေရြးခ်ယ္သုံးနိုင္သလို ၊ အျခားတိုင္းရင္းသာ ေဖာင့္ေတြကိုပါ အင္တာနက္အေပၚမွာ အဆင္ေျပေျပေရးနိုင္တာမို႔ ဒီနည္းလမ္းေလးက အဆင္ေျပေစမွာပါ။
ကၽြန္ေတာ္တို႔ Font Embed ျပဳလုပ္ဖို႔အတြက္ မူရင္း Font File ( *.ttf ) တစ္ခုပဲ လိုအပ္ပါတယ္။ က်န္ေသာ File Types ေတြကို ကၽြန္ေတာ္တို႔ ျပန္လည္ ဖန္တီးနိုင္ေသာ နည္းလမ္းေတြရွိပါတယ္။
ကၽြန္ေတာ္ Font Embed Code ကို ပထမဆုံးၾကည့္ရင္ ဘာေၾကာင့္ အဲ့လိုဖိုင္ေလးဖိုင္လိုအပ္တာကို သိလာပါမယ္။
ကၽြန္ေတာ္ရလာေသာ CSS Codes ေတြက :
@font-face {
font-family: ‘UndercoverRegular’;
src: url(‘UNDERCOV-webfont.eot’); /* IE9 Compat Modes */
src: url(‘UNDERCOV-webfont.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘UNDERCOV-webfont.woff’) format(‘woff’), /* Modern Browsers */
url(‘UNDERCOV-webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘UNDERCOV-webfont.svg#UndercoverRegular’) format(‘svg’); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
ကၽြန္ေတာ္ အဲ့ဒီနည္းအတိုင္း လုပ္ၾကည့္တာ အဆင္ေျပသလို ကိုယ္တပ္ဆင္ထားေသာ ေဖာင့္ကိုလည္း ဆိုဒ္ကို ေလးလံျခင္းမရွိပဲ ၾကည့္နိုင္တာကိုေတြ႕ရပါတယ္။
ပထမဆုံးကၽြန္ေတာ္တို႔ ေဖာင့္ဖိုင္ေလးဖိုင္လုံးမလိုေသးပါဘူး။ မူရင္း တစ္ဖိုင္ပဲလိုအပ္ပါတယ္။
ဉပမာ။ Myanmar3 Font ကို Font Embed ျပဳလုပ္မယ္ဆိုပါေတာ့ လိုအပ္တာက Myanmar3.ttf ဆိုတာေလးလိုအပ္ပါတယ္။ အင္တာနက္မွာ ေဒါင္းလုပ္ခ်နိုင္သလို တကယ္က ကိုယ္အသုံးျပဳေနေသာ ေဖာင့္ျဖစ္တာမို႔ ကြန္ပ်ဴတာမွာ အဆင္သင့္ရွိေနတက္ပါတယ္။
၁) *.ttf Font File to *.eot Font
ဒီကိစၥအတြက္ဆိုရင္ ကၽြန္ေတာ္လြယ္ကူေသာ Online Font Conventer ကိုပဲ အသုံးျပဳမွာပါ။ အဲ့လို ttf - eot ေျပာင္းလဲဖို႔ http://www.kirsle.net/wizards/ttf2eot.cgi မွာ လြယ္လြယ္ကူကူေျပာင္းလဲနိုင္ပါတယ္။ အျခားကိုယ္ႀကိဳက္ရာဆိုဒ္၊ ေဆာ့ဝဲလ္ကိုလည္းပဲ အသုံးျပဳနိုင္ပါတယ္။ အဲ့ဒီဆိုဒ္မွာ *.ttf File ေလးကို Upload ေခၚယူၿပီး အလြယ္တကူ eot file ေျပာင္းလဲကာ ေဒါင္းလုပ္ခ်နိုင္ပါတယ္။
၂) *.ttf Font File to *.svg
သူ႔အတြက္ကေတာ့ အြန္လိုင္ေဖာင့္ေျပာင္းေပးနိုင္တဲ့ဆိုဒ္ျဖစ္တဲ့ http://www.freefontconverter.com/ မွာ သြားေရာက္ ေျပာင္းလဲနိုင္ပါတယ္ခင္ဗ်ား။
၃) *.ttf Font File to *.woff
သူ႔အတြက္ကေတာ့ ကၽြန္ေတာ္ Online Conventer ကို မသုံးပါဘူး။ sfnt2woff ဆိုေသာ ေဆာ့ဝဲလ္ေလးကို သုံးပါမယ္။ http://people.mozilla.org/~jkew/woff/ မွာ ေဒါင္းလုပ္ရယူနိုင္ပါတယ္ခင္ဗ်ား။ အသုံးျပဳပုံက မခက္ပါဘူး။ ေဖာင့္တစ္ခုခုကို .woff ေျပာင္းဖို႔ဆိုရင္ ဖိုဒါတစ္ခု အရင္ေဆာက္၊ အဲ့ဒီဖိုဒါထဲမွာ sfnt2woff ေဆာ့ဝဲလ္ေလးနဲ႔ အတူ ttf File ကို အတူထား။ Windows Platform မွာေတာ့ ဖိုဒါတစ္ခုတည္းမွာ sfnt2woff.exe ေလးနဲ႔ ကိုယ္သုံးခ်င္ေသာ ေဖာင့္ ဉပမာ Myanmar3.ttf ကို အတူထား Command Line ကေနၿပီး sfnt2woff.exe Myanmar3.ttf လို႔ရိုက္ထည့္ရင္ရပါတယ္။ Command Line မသုံးတက္ရင္ Note Pad ကို ဖြင့္ Command ကို ကူးထည့္ *.bat နဲ႔ Save လုပ္။ *.bat ေလးကိုပါ အဲ့ဒီ ဖိုဒါေလးထဲမွာထည့္ ၿပီး Double Click နဲ႔ Run လိုက္ရင္ *.woff file ေလး အဲ့ဒီဖိုဒါေလးထဲမွာ ေအာ္တိုထြက္လာတာကို ေတြ႕ရမွာပါ။ Command က မွာလို႔မရပါဘူး sfnt2woff.exe Space နဲ႔ Myanmar3.ttf ၾကားမွာ Space တစ္ခ်က္ပါပါတယ္။ Myanmar3.ttf ေနရာမွာ ကိုယ္အသုံးျပဳလိုေသာ ဉပမာ Zawgyi-One.ttf ကို အသုံးျပဳရင္ Zawgyi-One.woff ကို ရရွိမွာ ျဖစ္ပါတယ္။
ကဲ့ အခုဆိုရင္ ကၽြန္ေတာ္တို႔မွာ မူရင္းရွိေသာ ttf ရယ္ ေနာက္ ေျပာင္းလဲထားေသာ eot , svg , woff စုစုေပါင္း ေလးဖိုင္ရွိသြားပါၿပီ။
အဲ့ဒီေလးဖိုင္ကို Hosting တစ္ခုခုမွာ တင္ရပါမယ္။ ကၽြန္ေတာ္ကေတာ့ Dropbox ( https://www.dropbox.com ) ကို အသုံးျပဳပါတယ္ခင္ဗ်ား။ Dropbox ( https://www.dropbox.com ) မွာ အေကာင့္ ျပဳလုပ္၊ ေနာက္ ဖိုင္ေလးခုလုံးကို Upload ဆြဲတင္ၿပီး Download Link ေတြကို မွတ္သားပါ။
ဉပမာ ။ ။ လင့္ေတြက https://www.dropbox.com/s/zrggd6upa2rewe/mm3.eot အစရွိသျဖင့္ရရွိမွာ ျဖစ္ပါတယ္။ ဖိုင္ေလးဖိုင္အတြက္ လင့္က ေလးခုရမွာပါ။
Blogspot သမားမ်ားအတြက္ကေတာ့ Font Embed ျပဳလုပ္ဖို႔ဆိုရင္ ပထမဆုံး www.blogger.com မွာ Sign In ဝင္ေရာက္ရမွာ ျဖစ္ပါတယ္။
ေနာက္ Dashboard > Template ကို ကလစ္လုပ္ရပါမယ္။
အဲ့မွာ Customize ဆိုတာေလးရွိပါတယ္။ သူ႔ကို ကလစ္တစ္ခ်က္ႏွိပ္ရပါမယ္။
Customize ေရာက္ရင္ေတာ့ ေအာက္ဆုံးက Advanced ကို ကလစ္လုပ္ရမွာပါ။
Advanced ရဲ့ ေအာက္ဆုံးမွာ Add CSS ဆိုတာေလးကို ကလစ္လုပ္ပါ။ အဲ့မွာ CSS Code ေတြ ထည့္သြင္းလို႔ရေသာ ေနရာေလးရွိပါတယ္။ အဲ့ဒီကုဒ္ေတြထည့္သြင္းနိုင္ေသာ ေနရာမွာ ေအာက္က ပုံစံအတိုင္း ကုဒ္ေတြ ထည့္သြင္းနိုင္ပါတယ္ခင္ဗ်ား။
**** Myanmar3 အတြက္ ပုံစံပါ။
@font-face {
font-family: ‘Myanmar3’;
src: url(‘https://www.dropbox.com/s/nn89xr366qsuh/mm3.eot’); /* IE9 Compat Modes */
src: url(‘https://www.dropbox.com/s/nn89xr36lqsuh/mm3.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘https://www.dropbox.com/s/goobfl2tcs58bt/mm3.woff’) format(‘woff’), /* Modern Browsers */
url(‘https://www.dropbox.com/s/goobfl2tc8lxb/mm3.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘https://www.dropbox.com/s/zlcuoar1j8mmd/mm3.svg#UndercoverRegular’) format(‘svg’); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
body,html,p,code,*,table,td,tr,span,div,a,ul,li,input,textarea{font-family:'Myanmar3'!important;}
( ကၽြန္ေတာ္က ပုံစံျပထားတာပါ။ အဲ့ဒီလင့္ေတြမွာ ေဖာင့္မရွိပါဘူး။ မိတ္ေဆြတိုတင္ထားေသာ လင့္ကို အသုံးျပဳရမွာ ျဖစ္ပါတယ္။ )
**** Zawgyi-One အတြက္ ပုံစံ။
@font-face {
font-family: ‘Zawgyi-One’;
src: url(‘https://www.dropbox.com/s/ft923yrmqpl7g/Zawgyi-One.eot’); /* IE9 Compat Modes */
src: url(‘https://www.dropbox.com/s/ft923y9frpl7g/Zawgyi-One.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘https://www.dropbox.com/s/9d2su6ks4yaa9/Zawgyi-One.woff’) format(‘woff’), /* Modern Browsers */
url(‘https://www.dropbox.com/s/xauqf0d84tmod/Zawgyi-One.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘https://www.dropbox.com/s/2psu6wix90drs/zawgyione.svg#UndercoverRegular’) format(‘svg’); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
body,html,p,code,*,table,td,tr,span,div,a,ul,li,input,textarea{font-family:'Zawgyi-One'!important;}
( ကၽြန္ေတာ္က ပုံစံျပထားတာပါ။ အဲ့ဒီလင့္ေတြမွာ ေဖာင့္မရွိပါဘူး။ မိတ္ေဆြတိုတင္ထားေသာ လင့္ကို အသုံးျပဳရမွာ ျဖစ္ပါတယ္။ )
ကၽြန္ေတာ္ အသုံးျပဳထားေသာ နည္းလမ္းမ်ားကို ႏွစ္သက္မွုမရွိပါက http://mmwebfonts.comquas.com မွာ သြားေရာက္ေလ့လာနိုင္ပါတယ္။ http://mmwebfonts.comquas.com ဆိုဒ္ကေတာ့ ကိုေစတန္းဖန္တီးထားေသာ ဆိုဒ္ ျဖစ္ပါတယ္။
ဘေလာ့ဂ္ဂါမ်ား ျမန္မာယူနီကုဒ္၊ မြန္ ၊ ရွမ္းစာမ်ားအတြက္ကေတာ့ http://mmuniembed.blogspot.sg/ မွာ သြားေရာက္ေလ့လာနိုင္ပါတယ္။
အခု ကၽြန္ေတာ္ေရးထားေသာ နည္းလမ္းသည္ အခုေလာ္ေလာ္ဆယ္ ကၽြန္ေတာ္ ဘေလာ့ဂ္အတြက္ အသုံးျပဳထားေသာ နည္းလမ္းလဲျဖစ္ၿပီး ဘေလာ့ဂ္ဂါအေတာ္မ်ားမ်ားလည္း သိထားေသာ နည္းလမ္းပဲ ျဖစ္ပါတယ္။
Wordpree လိုမ်ိဳး Local Host မွာ Run မယ္ဆိုရင္ေတာင္ ေဖာင့္ေတြကို Local Host အေပၚဆြဲတင္ၿပီး အသုံးျပဳနိုင္ေသာ နည္းလမ္းပဲ ျဖစ္ပါတယ္ခင္ဗ်ား။
ေနာက္ၿပီး ကိုယ့္ပိုင္အေကာင့္နဲ႔ Dropbox မွာ တင္ထားတာျဖစ္တာေၾကာင့္ ဆိုဒ္ကလည္း ေပါ့ေပါ့ပါးပါးရွိပါတယ္။ အမ်ားသုံး လင့္ခ္ကို အသုံးျပဳပါက ဆိုဒ္က ကိုယ့္ Font Embed လုပ္ထားေသာ ေဖာင့္ကို ျမင္ရဖို႔ကို နည္းနည္းၾကာျမင့္တက္ပါတယ္။
******* အမွားယြင္းမ်ားပါက ခြင့္လြတ္ေထာက္ျပၾကပါ ခင္ဗ်ား၊
** ကိုကိုေဇာ္ ( BE-EC )
