CSS @font-face rule

Paglilinaw at paggamit

Sa pamamagitan ng paggamit ng @font-face rule, ang Web designer ay hindi na kailangang gamitin ang anumang "secure" font.

Sa @font-face rule, dapat mo muna ring tuluyang magbigay ng pangalan ng font (halimbawa, myFirstFont) bago ito itukoy sa font file.

Tip:Ang URL ng font ay gumagamit ng maliliit na titik. Ang malakas na titik ay maaaring magdulot ng di inaasahang resulta sa IE!

Kung gusto mong gamitin ang font sa HTML element, i-refer ang pangalan ng font sa pamamagitan ng font-family attribute (myFirstFont):

div {
  font-family: myFirstFont;
}

Mga pangkat ng pagkakitaan:

CSS Tutorial:CSS Web 字体

实例

Tinukoy ang isang font na may pangalan na "myFirstFont" at tukoy ang URL kung saan maaari itong mahanap:

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

亲自试一试

Maaari mong mahanap ang mas maraming halimbawa ng TIY sa ibaba ng pahina.

CSS grammar

@font-face {
  font-properties
}
font-descriptor halaga paglalarawan
font-family name wakas. Tinukoy ang pangalan ng font.
src URL wakas. Tinukoy ang URL ng pag-download ng font.
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 Not supported Not supported Not supported 3.2 Not supported
EOT 6.0 Not supported Not supported Not supported Not supported

* Edge 和 IE: 字体格式仅在设置为 "installable" 时有效

* Firefox：默认情况下是禁用的，但可启用（需要将 flag 设置为 "true" 才能使用 WOFF2）。