JavaScript ဖြင့် Adobe Fonts (Typekit) ကိုပိုမိုမြန်ဆန်စွာတင်နည်း
ကျွန်ုပ်၏ site ၏စွမ်းဆောင်ရည်ကိုမြှင့်တင်ရန်ရှာဖွေနေသကဲ့သို့၊ စိုးရိမ်စရာတစ်ခုမှာ Adobe Fonts မှတဆင့်ကျွန်ုပ်အသုံးပြုနေသောစိတ်ကြိုက်ဖောင့်များကိုတင်နေသည် Adobe က Creative Cloud (TypeKit ဟုလည်းခေါ်သည်)။ ဖောင့်များတင်လိုပါက၊ နည်းလမ်းအနည်းငယ်ရှိပါသည်။
- Browser-Safe Fonts- မည်သည့် စိတ်ကြိုက်ဖောင့်များကိုမဆို အသုံးပြုခြင်းကို ရှောင်ကြဉ်ပြီး မူရင်းဘရောက်ဆာ-ပံ့ပိုးပေးထားသော ဖောင့်များကို အသုံးပြုခြင်းဖြင့်၊ သင်သည် ဆိုက်တစ်ခု၏ အရှိန်ကို သိသိသာသာ တိုးမြှင့်နိုင်ပါသည်။ ၎င်းသည် ရွေးချယ်မှုတစ်ခုဟု ထင်ရသော်လည်း အလုံးစုံ အလှတရားသည် ကြောက်မက်ဖွယ်ကောင်းပေလိမ့်မည်။ သင်သည် Arial၊ Helvetica၊ Times New Roman၊ Georgia နှင့် Courier New တို့ကို ကန့်သတ်ထားသောကြောင့် ကုမ္ပဏီအများစုအတွက် လက်တွေ့ကျသော ရွေးချယ်မှုတစ်ခုမဟုတ်ပေ။
- Self-Hosting ဖောင့်များ- ဖောင့်များအတွက် လိုင်စင်ကို သင်ဝယ်ယူနိုင်ပြီး ၎င်းတို့ကို သင့်ဆာဗာတွင် တင်ခိုင်းနိုင်သည်။ ပိုမြန်အောင် လုပ်ဆောင်နိုင်တဲ့ ဖွံ့ဖြိုးတိုးတက်မှုလည်း ရှိပါတယ်... ဒါပေမယ့် အလုပ်နည်းနည်း များနေပုံရတယ်။
- လက်ခံထားသော ဖောင့်များ- ဝဘ်ဒီဇိုင်နာအများစုသည် ဖောင့်အစုံအလင်ကို တည်ဆောက်နိုင်ပြီး ကုဒ်ကို အမြန်ကုဒ်အတိုအထွာဖြင့် သင့်ဆိုဒ်တွင် ကိုးကားဖော်ပြရန်နှင့် ၎င်းတို့ကိုပြသရန်အတွက် ဝဘ်ဒီဇိုင်နာအများစုသည် လက်ခံထားသည့်စာကြည့်တိုက်များကို အသုံးပြုကြသည်။ ဤဈေးကွက်တွင် အဓိက ကစားသမားနှစ်ဦးမှာ Adobe နှင့် ဖြစ်သည်။ Google က Fonts။ များသော CMS ပလပ်ဖောင်းများသည် ယင်းတို့ကို ထည့်သွင်းရန် လုပ်ဆောင်နိုင်စွမ်းကို ပေါင်းစပ်ထားသည်။
Adobe ဖောင့်
Adobe Fonts ဖြင့် သင့်ဆိုဒ်တွင် သင်ပြသလိုသော ဖောင့်များကို ရွေးချယ်ပြီး ၎င်းတို့နှင့်အတူ ပရောဂျက်တစ်ခုကို တည်ဆောက်ပါ။ ဤနေရာတွင် အရေးကြီးသောအချက်တစ်ခုမှာ သင့်ဆိုက်တစ်လျှောက်တွင် သင်အသုံးပြုလိုသော ဖောင့်များကိုသာ တင်ရန်ဖြစ်ပြီး နောက်ထပ်ဖောင့်များနှင့် ပုံစံများကို သင်ရွေးချယ်လေလေ သင့်ဆိုက်သည် နှေးကွေးလေဖြစ်သည်။
ပရောဂျက် ID ကို သတိပြုပါ (xxxxကုဒ်နမူနာတစ်ခုစီတွင်) ကိုအသုံးပြုသည်။ ဤကုဒ်ကို အသုံးပြုလိုပါက၊ ပရောဂျက် ID ကို သင့်ပရောဂျက် ID ဖြင့် အစားထိုးရန် သေချာစေပါ သို့မဟုတ်ပါက ၎င်းသည် အလုပ်မဖြစ်ပါ။ သင်တွေ့မြင်ရသည့်အတိုင်း ဖောင့်များကို တင်ရန်အတွက် ပေးထားသော မူရင်း script မှာ-
<link rel="stylesheet" href="https://use.typekit.net/xxxxxx.css">
ကံမကောင်းစွာဖြင့်၊ Adobe Fonts သည် သင့်ဖောင့်များကို တင်ရန်အတွက် ပိုမိုကောင်းမွန်သော ရွေးချယ်ခွင့်ကို မပေးနိုင်သေးသော်လည်း… ၎င်းတွင် ရှိနေပါသည်။ Adobe မှ ပေးထားသော အောက်ပါ အမွေအနှစ် JavaScript ကုဒ်သည် ဖောင့်များမှတဆင့် တင်ခြင်းထက် ပိုမိုမြန်ဆန်သည်။ CSS ကို အကြောင်းပြချက်အနည်းငယ်ကြောင့်
- JavaScript ကုဒ်ကိုအသုံးပြုသည်။ ပြတ်တောင်းပြတ်တောင်း loading၊ ဆိုလိုသည်မှာ ဘရောက်ဆာသည် script ကိုရယူနေစဉ်တွင် စာမျက်နှာကို ဆက်လက်တင်နိုင်မည်ဖြစ်သည်။ ဆန့်ကျင်ဘက်အားဖြင့်၊ သင်သည် CSS မှတစ်ဆင့် ဖောင့်များကို တင်သည့်အခါ၊ ဖောင့်များကို မစတင်မီတွင် ဘရောက်ဆာသည် CSS ဖိုင်ကို ဒေါင်းလုဒ်လုပ်ပြီး ခွဲခြမ်းစိတ်ဖြာရန် စောင့်ရပါမည်။ ၎င်းသည် ဖောင့်တင်ရာတွင် နှောင့်နှေးမှုနှင့် စာမျက်နှာဖွင့်ချိန်များ နှေးကွေးစေနိုင်သည်။
- JavaScript ကုဒ်ကိုအသုံးပြုသည်။ Typekit ဝဘ်ဖောင့် loaderဖောင့်များတင်ခြင်းအတွက် အပိုလုပ်ဆောင်ချက်ကို ပံ့ပိုးပေးသော၊ ဥပမာအားဖြင့်၊ ဝဘ်ဖောင့်တင်သူသည် ဘရောက်ဆာက ၎င်းကို ပံ့ပိုးပေးသည်ရှိမရှိကို ရှာဖွေနိုင်သည်။
@font-face
စည်းမျဉ်းနှင့် ပံ့ပိုးမှုမရှိသော ဘရောက်ဆာများတွင် ဖောင့်များကို မလိုအပ်ဘဲ တင်ခြင်းကို ရှောင်ရှားနိုင်သည်။@font-face
. ၎င်းသည် ပိုမိုကောင်းမွန်သော ဖောင့်တင်ခြင်း စွမ်းဆောင်ရည်နှင့် ပိုမိုကောင်းမွန်သော ဖောင့်ဖော်ခြင်းတို့ကို ပေးစွမ်းနိုင်သည်။ - CSS နည်းလမ်းသည် နောက်ထပ်တစ်ခု လိုအပ်သည်။ သည် HTTP JavaScript ကုဒ်သည် ကိုယ်တိုင်ပါ၀င်ပြီး CSS ဖိုင်ကို ရယူရန် တောင်းဆိုသည်။ နောက်ထပ်ဖိုင်များမလိုအပ်ပါ။ ထုတ်ယူရန်။ ၎င်းသည် JavaScript ကုဒ်အတွက် တင်သည့်အချိန်အနည်းငယ် ပိုမြန်စေနိုင်သည်။
ယေဘုယျအားဖြင့်၊ Typekit ဖောင့်များကိုဖွင့်ရန် ဤရှေးဟောင်း JavaScript နည်းလမ်းကို အသုံးပြုခြင်းဖြင့် CSS နည်းလမ်းကို အသုံးပြုခြင်းထက် ပိုမိုမြန်ဆန်ပြီး ယုံကြည်စိတ်ချရသော ဖောင့်တင်ခြင်းကို ဖြစ်ပေါ်စေနိုင်သည်။
<script src="//use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
အကယ်၍ သင်သည် WordPress ဆိုက်ကို အသုံးပြုနေပါက၊ သင့်ပရောဂျက်ကို တင်ရန် သင်၏ functions.php ဖိုင်ကိုလည်း အပ်ဒိတ်လုပ်နိုင်ပါသည်။
add_action( 'wp_head', 'theme_typekit_inline' );
function theme_typekit() {
wp_enqueue_script( 'theme_typekit', '//use.typekit.net/xxxxxx.js', '', false);
}
add_action( 'wp_enqueue_scripts', 'theme_typekit' );
function theme_typekit_inline() {
if ( wp_script_is( 'theme_typekit', 'done' ) ) { ?>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<?php }
}
သင့် site ၏အမြန်နှုန်းကိုမြှင့်တင်ရန်ကြိုးစားနေချိန်တွင်အနည်းငယ်ရေတွက်သည်။ Adobe Fonts သည် အလွန်လျင်မြန်သော ဝန်ဆောင်မှုတစ်ခုမဟုတ်ပါ၊ ထို့ကြောင့် စာမျက်နှာတစ်ခုစီတိုင်းတွင် အချိန်အနည်းငယ်ကြာအောင် ရိတ်ပေးခြင်းဖြင့် ကွဲပြားခြားနားမှုကို ဖြစ်စေနိုင်သည်။