CSS ဝဘ်ဖောင့်များ
CSS @font-face စည်းမျဉ်း
ဝဘ်ဖောင့်များသည် ဝဘ်ဒီဇိုင်နာများကို အသုံးပြုသူ၏ကွန်ပျူတာပေါ်တွင် ထည့်သွင်းမထားသည့် ဖောင့်များကို အသုံးပြုခွင့်ပေးသည်။
သင်အသုံးပြုလိုသောဖောင့်ကို ရှာတွေ့/ဝယ်သောအခါ၊ သင့်ဝဘ်ဆာဗာတွင် ဖောင့်ဖိုင်ကို ထည့်သွင်းပြီး လိုအပ်သည့်အခါ အသုံးပြုသူထံ အလိုအလျောက် ဒေါင်းလုဒ်လုပ်မည်ဖြစ်သည်။
@font-faceသင်၏ "ကိုယ်ပိုင်" ဖောင့်များကို CSS စည်းမျဉ်း အတွင်း သတ်မှတ်ထားသည် ။
မတူညီသောဖောင့်ပုံစံများ
TrueType ဖောင့်များ (TTF)
TrueType သည် Apple နှင့် Microsoft မှ 1980 ခုနှစ်နှောင်းပိုင်းတွင် တီထွင်ခဲ့သော ဖောင့်စံတစ်ခုဖြစ်သည်။ TrueType သည် Mac OS နှင့် Microsoft Windows OS နှစ်ခုလုံးအတွက် အသုံးအများဆုံး ဖောင့်ဖော်မတ်ဖြစ်သည်။
OpenType ဖောင့်များ (OTF)
OpenType သည် အရွယ်တင်နိုင်သော ကွန်ပျူတာဖောင့်များအတွက် ဖော်မတ်တစ်ခုဖြစ်သည်။ ၎င်းကို TrueType တွင်တည်ဆောက်ထားပြီး Microsoft ၏မှတ်ပုံတင်ထားသောကုန်အမှတ်တံဆိပ်တစ်ခုဖြစ်သည်။ OpenType ဖောင့်များကို အဓိက ကွန်ပျူတာ ပလပ်ဖောင်းများတွင် ယနေ့ခေတ်တွင် အသုံးများသည်။
ဝဘ်၏ ဖောင့်ပုံစံ (WOFF)
WOFF သည် ဝဘ်စာမျက်နှာများတွင် အသုံးပြုရန်အတွက် ဖောင့်ဖော်မတ်တစ်ခုဖြစ်သည်။ ၎င်းကို 2009 ခုနှစ်တွင် တီထွင်ခဲ့ပြီး ယခုအခါ W3C အကြံပြုချက်ဖြစ်သည်။ WOFF သည် အဓိကအားဖြင့် OpenType သို့မဟုတ် TrueType ကို ချုံ့ပြီး ထပ်ဆင့်မက်တာဒေတာပါရှိသည်။ ပန်းတိုင်သည် လှိုင်းနှုန်းကန့်သတ်ချက်များရှိသော ကွန်ရက်တစ်ခုမှတဆင့် ဆာဗာတစ်ခုမှ ဖောင့်ဖြန့်ဝေမှုကို ပံ့ပိုးပေးရန်ဖြစ်သည်။
ဝဘ်ဖွင့်ထားသော ဖောင့်ဖော်မတ် (WOFF 2.0)
WOFF 1.0 ထက် ပိုမိုကောင်းမွန်သော ဖိသိပ်မှုကို ပံ့ပိုးပေးသော TrueType/OpenType ဖောင့်။
SVG ဖောင့်/ပုံသဏ္ဍာန်များ
SVG ဖောင့်များသည် SVG ကို စာသားကိုပြသသည့်အခါ glyphs အဖြစ်အသုံးပြုရန် ခွင့်ပြုသည်။ SVG 1.1 သတ်မှတ်ချက်သည် SVG စာရွက်စာတမ်းအတွင်း ဖောင့်ဖန်တီးမှုကို ခွင့်ပြုသည့် ဖောင့်မော်ဂျူးတစ်ခုကို သတ်မှတ်သည်။ သင်သည် CSS ကို SVG စာရွက်စာတမ်းများတွင်လည်း အသုံးပြုနိုင်ပြီး၊ @font-face စည်းမျဉ်းကို SVG စာရွက်စာတမ်းများတွင် စာသားအတွက် အသုံးပြုနိုင်သည်။
ထည့်သွင်းထားသော OpenType ဖောင့်များ (EOT)
EOT ဖောင့်များသည် ဝဘ်စာမျက်နှာများတွင် ထည့်သွင်းထားသော ဖောင့်များအဖြစ် အသုံးပြုရန်အတွက် Microsoft မှ ဒီဇိုင်းထုတ်ထားသော OpenType ဖောင့်များ၏ သေးငယ်သောပုံစံတစ်ခုဖြစ်သည်။
ဖောင့်ဖော်မတ်များအတွက် ဘရောက်ဆာ ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ဖောင့်ဖော်မတ်ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
| Font format | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*IE- "installable" ဟုသတ်မှတ်ထားမှသာ ဖောင့်ဖော်မတ်သည် အလုပ်လုပ်သည်။
သင်အလိုရှိသောဖောင့်ကို အသုံးပြု
@font-faceစည်းကမ်းချက်၌ ; ပထမဦးဆုံး ဖောင့်အမည် (ဥပမာ myFirstFont) ကို သတ်မှတ်ပြီး ဖောင့်ဖိုင်ကို ညွှန်ပါ။
အကြံပြုချက်- ဖောင့် URL အတွက် စာလုံးသေးများကို အမြဲသုံးပါ။ စာလုံးကြီးများသည် IE တွင် မမျှော်လင့်ထားသောရလဒ်များကို ပေးနိုင်သည်။
HTML ဒြပ်စင်တစ်ခုအတွက် ဖောင့်ကိုအသုံးပြုရန်၊ font-familyပိုင်ဆိုင်မှုမှတစ်ဆင့် ဖောင့်အမည် (myFirstFont) ကို ကိုးကားပါ-
ဥပမာ
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Bold Text ကိုအသုံးပြုခြင်း။
@font-faceရဲရင့်သောစာသားအတွက် ဖော်ပြချက်များပါရှိသော အခြားသောစည်းမျဉ်းကို သင်ထည့်သွင်းရပါမည် -
ဥပမာ
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
ဖိုင် "sansation_bold.woff" သည် Sansation ဖောင့်အတွက် ရဲရင့်သောစာလုံးများပါရှိသော အခြားဖောင့်ဖိုင်ဖြစ်သည်။
ဖောင့်-မိသားစု "myFirstFont" ပါသည့် စာသားအပိုင်းအစကို စာလုံးကြီးအဖြစ် ပြန်ဆိုသည့်အခါတိုင်း ဘရောက်ဆာများသည် ၎င်းကို အသုံးပြုပါမည်။
@font-faceဤနည်းအားဖြင့် သင်သည် တူညီသောဖောင့်အတွက် စည်းမျဉ်း များစွာရှိနိုင်သည် ။
CSS ဖောင့်ဖော်ပြချက်များ
အောက်ပါဇယားသည် @font-faceစည်းမျဉ်းအတွင်း သတ်မှတ်နိုင်သော ဖောင့်ဖော်ပြချက်အားလုံးကို ဖော်ပြသည်-
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |