CSS @font-face စည်းမျဉ်း
ဥပမာ
"myFirstFont" ဟု အမည်ပေးထားသည့် ဖောင့်တစ်ခုကို သတ်မှတ်ပြီး ၎င်းကို တွေ့ရှိနိုင်သည့် URL ကို သတ်မှတ်ပါ-
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
စည်းမျဉ်း အ @font-face
ရ၊ ဝဘ်ဒီဇိုင်နာများသည် "ဝဘ်ဘေးကင်းသော" ဖောင့်များထဲမှ တစ်ခုကို အသုံးပြုရန် မလိုအပ်တော့ပါ။
စည်းမျဉ်း တွင် @font-face
သင်သည် ဖောင့်အတွက် အမည်တစ်ခု (ဥပမာ myFirstFont) ကို ဦးစွာ သတ်မှတ်ရမည်ဖြစ်ပြီး၊ ထို့နောက် ဖောင့်ဖိုင်ကို ညွှန်ပြရမည်ဖြစ်သည်။
HTML ဒြပ်စင်တစ်ခုအတွက် ဖောင့်ကိုအသုံးပြုရန် ဖောင့်-မိသားစုပိုင်ဆိုင်မှုမှတစ်ဆင့် ဖောင့်အမည် (myFirstFont) ကို ကိုးကားပါ-
div
{
font-family: myFirstFont;
}
Browser ပံ့ပိုးမှု
စည်း @font-face
မျဉ်းကို Edge၊ Chrome၊ Firefox၊ Safari နှင့် Opera တို့တွင် ပံ့ပိုးထားသည်။
ဇယားရှိ နံပါတ်များသည် ဖောင့်ဖော်မတ်ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
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 |
*ဖောင့်ဖော်မတ်သည် "တပ်ဆင်နိုင်သည်" ဟုသတ်မှတ်ထားမှသာ အလုပ်လုပ်သည်။
အထားအသို
@font-face
{
font-properties
}
Font descriptor | Values | Description |
---|---|---|
font-family | name | Required. Defines the name of the font. |
src | URL | Required. Defines the URL(s) where the font should be downloaded from |
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 value is "normal" |
font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default value is "normal" |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default value is "normal" |
unicode-range | unicode-range | Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF" |
နောက်ထပ် ဥပမာများ
ဥပမာ
ရဲရင့်သောစာသားအတွက် ဖော်ပြချက်များပါရှိသော အခြားသော @font-face စည်းမျဉ်းကို သင်ထည့်ရပါမည်။
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
ဖိုင် "sansation_bold.woff" သည် Sansation ဖောင့်အတွက် ရဲရင့်သောစာလုံးများပါရှိသော အခြားဖောင့်ဖိုင်ဖြစ်သည်။
ဖောင့်-မိသားစု "myFirstFont" ပါသည့် စာသားအပိုင်းအစကို စာလုံးကြီးအဖြစ် ပြန်ဆိုသည့်အခါတိုင်း ဘရောက်ဆာများသည် ၎င်းကို အသုံးပြုပါမည်။
ဤနည်းဖြင့် သင်သည် တူညီသောဖောင့်အတွက် @font-face စည်းမျဉ်းများစွာကို ရနိုင်သည်။
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS ဝဘ်ဖောင့်များ