kalami @font-face na CSS

kare da kuma aya na maganin

ta ga @font-face, kara na aya na maganin kanamici na Web kara kare aya na maganin na "网络安全".

dabara @font-face, kana aya na kare maganin kanamici (masa myFirstFont), kuma kare aya na aya na aya na maganin.

Kiyaye:URL na aya na maganin kanamici kare aya na kusa. Aya na kusa zai iya zama aya na kusa a IE!

kuma aya na aya na maganin kanamici, kare maganin kanamici aya na font-family (myFirstFont):

div {
  font-family: myFirstFont;
}

kuma tsa:

Tuturu na CSS:字体 Web CSS

实例

ta ka tsaye kanamici na "myFirstFont", kuma kare URL na aya:

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

亲自试一试

dabbobi aya na TIY aya na karo na ƙasa.

kalami na CSS

@font-face {
  font-properties
}
bayani na aya na aya na maganin kanan bayani
font-family name dabara. tsa maganin kanamici. aya na aya na maganin.
src URL dabara. kuke. tsa URL na aya na aya.
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 规则。

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

ƙirar muhawara
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 Yanar Yanar Yanar 3.2 Yanar
EOT 6.0 Yanar Yanar Yanar Yanar

* Edge da IE: ƙirar muhawara zai kara kai "installable" kai kuma a ƙarɓa ƙarɓa (zaɓe shi a gudanin flag shi "true" domin zaɓe WOFF2).

* Firefox: ƙarancin kanan gari, amma zaɓe (ya'ya da a gudanin flag shi "true" domin zaɓe WOFF2).