CSS Web 字体

CSS @font-face 规则

Web 字体允许 Web 设计人员使用用户计算机上未安装的字体。

သင့်လိုသော အက်ဒေးလ် ကို တွေ့ရှိခဲ့သော်လည်းကောင်း သို့မဟုတ် သင့်လိုသော အက်ဒေးလ် ကို ဖြည့်စွက်ခဲ့သော်လည်းကောင်း အက်ဒေးလ် ဖိုင်ကို သင့် ဝီကီ အက်ဒေးလ် ပေါ်တွင် ပေါင်းစပ်ထားပြီး လိုအပ်သောအခါ အသုံးပြုသူများ အတွက် အက်ဒေးလ် ကို အတိုင်းအတာ ဖြင့် ဒေါင်းလုပ်ထားပါသည်。

သင့် 'ကိုယ်ပိုင်' အက်ဒေးလ် က CSS တွင် @font-face အခြား အချက်အလက် တွင် အသုံးပြုထားသည်。

အခြား အက်ဒေးလ် ပုံစံများ

TrueType အက်ဒေးလ် (TTF)

TrueType က 1980 ခုနှစ် နောက်ပိုင်းတွင် Apple နှင့် Microsoft က တီထွင်ခဲ့သော အက်ဒေးလ် အချက်အလက်ဖြစ်သည်။ TrueType က Mac OS နှင့် Microsoft Windows အထူးအားဖြင့် အသုံးပြုသော အက်ဒေးလ် ပုံစံဖြစ်သည်。

OpenType အက်ဒေးလ် (OTF)

OpenType က အလွန်ကြီးမားသော ကွဲပြားသော ကွန်ပျူတာ အက်ဒေးလ် ပုံစံဖြစ်သည်။ အဆိုပါ ပုံစံ က TrueType အပေါ် တည်ဆောက်ထားပြီး မတ်ကူး အသုံးပြုသည်။ ယနေ့အခါ အခြေခံ ကွန်ပျူတာ ပေါ်တွင် OpenType အက်ဒေးလ် က အသုံးပြုထားသည်。

Web အပ်နှံ့ အက်ဒေးလ် ပုံစံ (WOFF)

WOFF က ဝီကီ ပေါ်အတွက် အက်ဒေးလ် ပုံစံဖြစ်သည်။ အဆိုပါ ပုံစံ က 2009 ခုနှစ်တွင် တီထွင်ခဲ့ပြီး ယခုအခါ ဝီကီ၏ ကိုယ်စားပြုချက်အချက်အလက် ဖြစ်သည်။ WOFF သည် အခြေခံအားဖြင့် ကြည့်ပတ်သတ်ထားသော OpenType သို့မဟုတ် TrueType ဖြစ်သည်။ အားရွှေ့ကြောင်း ကြားအားလုံး ကို ဝီကီ အက်ဒေးလ် ကို ဝီကီ အက်ဒေးလ် အက်ဒေးလ် မှ ဝီကီ အက်ဒေးလ် အက်ဒေးလ် သို့ ချောက်ချိုးပေးရန် ရည်ရွယ်ထားသည်。

Web အပ်နှံ့ အက်ဒေးလ် ပုံစံ (WOFF 2.0)

TrueType/OpenType အက်ဒေးလ် က WOFF 1.0 ထက် ပိုကောင်းနိုင်သော ကြည့်ပတ်သတ်ထားသည်。

SVG အက်ဒေးလ်/ပုံ

SVG အက်ဒေးလ် က ပြောင်းလဲတိုက်ဆိုင်ရာ စာလုံးများ အတွက် SVG ကို အက်ဒေးလ် အသုံးပြုရန် ခွင့်ပြုသည်။ SVG 1.1 အချက်အလက် က အက်ဒေးလ် အစိတ်အပိုင်း ကို အသုံးပြုသည်။ သို့တည်းမဟုတ် သင့်တို့မှာ SVG အချက်အလက် ထိတွေ့ချင်ရှိသော CSS ကို အသုံးပြုနိုင်ပြီး @font-face အချက်အလက် ကို SVG အချက်အလက် အတွင်း အသုံးပြုနိုင်ပါသည်。

အပ်နှံ့ OpenType အက်ဒေးလ် (EOT)

EOT 字体是 Microsoft 设计的 OpenType 字体的紧凑形式，用作网页上的嵌入式字体。

对字体格式的浏览器支持

表格中的数字注明了完全支持该字体格式的首个浏览器版本。

字体格式
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 不支持 不支持 不支持 不支持

*IE：该字体格式仅在设置为 "installable" 时有效。

*Firefox：默认情况下不支持，但可以启用（需要将标志设置为 "true" 才能使用 WOFF2）。

使用您需要的字体

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

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

如需将字体用于 HTML 元素，请通过 font-family 属性引用字体名称（myFirstFont）：

实例

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

亲自试一试

使用粗体文本

您必须添加另一条 @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 အုပ်စုအရ အစိတ်အသားပုံအဘာသာတွေ၊ (font descriptor) ကို အုပ်စုအရ ဖော်ပြသည်:

ဖော်ပြသည် ဘာသာ ဖော်ပြ
font-family name လိုအပ်သည်။ အစိတ်အသားပုံအဘာသာ ကို ဒေါ်လုပ်ရသည်。
src URL လိုအပ်သည်။ အစိတ်အသားပုံအဘာသာ 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"。