CSS @font-face အကိုင်း
အသုံးပြုနည်းဥပမာ
@font-face အကိုင်းကို အသုံးပြုသောအခါ ဝိမ်သုံး အင်္ဂါလိပ်များကို အသုံးပြုရသည်။
@font-face အကိုင်းမှာ အင်္ဂါလိပ်အမည် (ဥပမာ myFirstFont) ကို ပထမပိုင်းတွင် သတ်မှတ်ပြီး အင်္ဂါလိပ်ဖိုင်ကို လိုက်န်းနိုင်ပါသည်။
အကြောင်းပြချက်:အင်္ဂါလိပ် URL ကို နောင်းစားသင်္ဂြိုလ်စကားလုံး အကျယ်အဝန်း ကို အသုံးပြုရသည်။ အမြင့်စားသင်္ဂြိုလ်စကားလုံးများကို IE တွင် အကြမ်းဖတ်နိုင်ကြောင်းလည်း ရှိသည်။
HTML အစိတ်အစိတ်များကို အင်္ဂါလိပ်အမည် (myFirstFont) ကို font-family အကိုင်းပြီး အသုံးပြုရန်:
div {
font-family: myFirstFont;
}
ပြင်ဆင်ချက်:
CSS အော်ပရာမေးတီစက်လုံး လက်တင်ဆိုင်ရာ ဝါဒ
实例
“myFirstFont” အမည်ရှိ အင်္ဂါလိပ်ကို သတ်မှတ်ပြီး တွေ့ရတဲ့ URL ကို သတ်မှတ်ရန်:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
ပြင်ဘားနောက်သို့ အသုံးပြုရသည်။
CSS အပိုအဖို
@font-face {
font-properties
}
| အင်္ဂါလိပ်ကိုးကွယ် | သတ်မှတ် | ဏ述 |
|---|---|---|
| font-family | name | လိုအပ်သည်။ အင်္ဂါလိပ်အမည် ကို သတ်မှတ်ရသည်။ |
| src | URL | လိုအပ်သည်။ အောက်ပါ URL ကို ဒေါင်းသုံးရိုက်ချယ်ရသည်။ |
| font-stretch |
|
可选。定义应如何拉伸字体。默认值是 "normal"。 |
| font-style |
|
可选。定义字体样式。默认值是 "normal"。 |
| font-weight |
|
可选。定义字体的粗细。默认值是 "normal"。 |
| unicode-range | unicode-range | 可选。定义字体支持的 Unicode 字符范围。默认值是 "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 规则。
浏览器支持
Internet Explorer、Firefox、Opera、Chrome 和 Safari 都支持 @font-face 规则。
表格中的数字注明了完全支持字体格式的首个浏览器版本。
| အက်ဖ်တာ ပြုတ်တ် | |||||
|---|---|---|---|---|---|
| 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 | ထောက်ပံ့မပါ | ထောက်ပံ့မပါ | ထောက်ပံ့မပါ | 3.2 | ထောက်ပံ့မပါ |
| EOT | 6.0 | ထောက်ပံ့မပါ | ထောက်ပံ့မပါ | ထောက်ပံ့မပါ | ထောက်ပံ့မပါ |
* Edge နှင့် IE: အက်ဖ်တာ ပြုတ်တ် အသုံးပြုရန် အက်ဖ်တာ ပြုတ်တ် အသုံးပြုရန် ဖွင့်ပေးခြင်းမျိုး သာ အသုံးပြုနိုင်သည်
* Firefox: မိန့်မှုနည်းပါးစွာ နှင့် ဖွင့်လိုက်ကာ အသုံးပြုနိုင်သည် (WOFF2 အသုံးပြုရန် flag ကို "true" အထိမ်းအထားပြုရသည်)。
