CSS @font-face 规则

  • အစိတ် စာရင်း font
  • နောက်ဆုံး စာရင်း font-family

定义和用法

通过使用 @font-face 规则，Web 设计师不必再使用任何一种“网络安全”字体。

在 @font-face 规则中，您必须首先定义字体名称（例如 myFirstFont），然后指向字体文件。

提示：字体的 URL 使用小写字母。大写字母可能会在 IE 中产生意外结果！

HTML အက္ခရာစကားလုံး ကို အသုံးပြုရန် အက္ခရာစကားလုံး အမည် (myFirstFont) ကို font-family အထိမ်းအားဖြင့် ကိုးကွယ်ပါ။

div {
  font-family: myFirstFont;
}

တောင်းပြောပါ:

CSS ဖော်ပြချက်:စက်ပိုင်း Web အဘိသာ

实例

"myFirstFont" အမည်ရှိ အက္ခရာစကားလုံး တစ်ခု ကို သတ်မှတ်ပြီး အခြား အားလုံး ကို တွေ့ရနိုင်သော URL ကို ချမှတ်ရန်:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

亲自试一试

ပြီးချင်း ပြုပြင်းပေါ်တွင် အခြား TIY အမျိုးမျိုး ကို တွေ့ရတယ်။

CSS အသုံးပြုဆန်

@font-face {
  font-properties
}
အက္ခရာစကားလုံး ကို ဖော်ပြ အရာ ဖော်ပြ
font-family name တစ်ခုချင်းသာလို့မရှိ။ အက္ခရာစကားလုံး အား အမည်ပြုရန်。
src URL တစ်ခုချင်းသာလို့မရှိ။ ဒါကို ဒေါင်းလုပ်သော အက္ခရာစကားလုံး အား ယူဆောင်းလုပ်ရန် လိုအပ်သည်。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 可选。定义应如何拉伸字体。默认值是 "normal"。
font-style
  • normal
  • italic
  • oblique
 可选。定义字体样式。默认值是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 可选。定义字体的粗细。默认值是 "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: အကွက်အရေးပါသည် "installable" အထိမ်းအထားပြုချိန်မှစ၍ အသုံးပြုနိုင်သည်

* Firefox: မိန့်မှုရှိသည်။ သို့သော်လည်း ဖွင့်လိုက်နိုင်ပါသည် (WOFF2 အသုံးပြုရန် flag ကို "true" အထိမ်းအထားပြုရသည်)。

  • အစိတ် စာရင်း font
  • နောက်ဆုံး စာရင်း font-family