Rekomendasi kursus:

Aturan @font-face CSS

Definisi dan penggunaan

Dengan menggunakan aturan @font-face, desainer web tidak lagi perlu menggunakan jenis huruf "berkeamanan".

Dalam aturan @font-face, Anda harus mengdefinikan pertama-tama nama huruf (contoh: myFirstFont), kemudian arahkan ke berkas huruf.Petunjuk:

URL huruf menggunakan huruf kecil. Huruf besar mungkin akan menghasilkan hasil tak diharapkan di IE!

Untuk menggunakan huruf untuk elemen HTML, gunakan properti font-family untuk mengacu kepada nama huruf (myFirstFont):
  font-family: myFirstFont;
}

div {

Lihat juga:Font Web CSS

实例

Tutorial CSS:

@font-face {
  font-family: myFirstFont;
  Tentukan huruf dengan nama "myFirstFont" dan tentukan URL yang dapat ditemukannya:
}

亲自试一试

src: url(sansation_light.woff);

Lebih banyak contoh TIY dapat ditemukan di bawah halaman.

@font-face {
  CSS 语法
}
font-properties nilai deskripsi
font-family name wajib. Tentukan nama huruf.
src URL wajib. Tentukan URL untuk muat turun huruf.
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）。