Aturan @font-face CSS

Definisi dan penggunaan

Dengan menggunakan aturan @font-face, desainer web tidak lagi perlu menggunakan font "sikap keamanan".

Dalam aturan @font-face, Anda harus mengdefiniskan nama font terlebih dahulu (contoh: myFirstFont) dan kemudian menunjuk ke berkas font.

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

Untuk menggunakan font untuk elemen HTML, gunakan atribut font-family untuk mengacu kepada nama font (myFirstFont):

div {
  font-family: myFirstFont;
}

Silakan lihat:

Panduan CSS:Font Web CSS

Contoh

Tentukan font dengan nama "myFirstFont" dan tentukan URL tempat dapat ditemukannya:

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

Coba sendiri

Bisa menemukan lebih banyak contoh TIY di bawah halaman.

Syarat CSS

@font-face {
  font-properties
}
Deskripsi font Nilai Deskripsi
font-family name Wajib. Tentukan nama font.
src URL Wajib. Tentukan URL untuk mengunduh font.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Pilihan. Definisi cara penggaris font. Nilai standar adalah "normal".
font-style
  • normal
  • italic
  • oblique
 Pilihan. Definisi gaya font. Nilai standar adalah "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Pilihan. Definisi tebal font. Nilai standar adalah "normal".
unicode-range unicode-range Pilihan. Definisi lingkungan Unicode yang didukung font. Nilai standar adalah "U+0-10FFFF".

Beberapa contoh lain

Contoh

Anda harus menambahkan aturan @font-face lain yang mengandung deskripsi teks tebal:

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

Coba sendiri

Berkas "sansation_bold.woff" adalah berkas font lain yang mengandung karakter tebal font Sansation.

Ketika setiap teks yang harus dipaparkan dengan tebal saat mengatur keluarga font "myFirstFont", peramban akan menggunakannya.

Dengan cara ini, Anda dapat menetapkan beberapa aturan @font-face untuk font yang sama.

Dukungan browser

Internet Explorer, Firefox, Opera, Chrome, dan Safari mendukung aturan @font-face.

Angka di tabel menunjukkan versi browser pertama yang mendukung format font secara penuh.

Format font
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 Tidak didukung Tidak didukung Tidak didukung 3.2 Tidak didukung
EOT 6.0 Tidak didukung Tidak didukung Tidak didukung Tidak didukung

* Edge dan IE: Format font hanya berlaku saat diatur menjadi "installable".

* Firefox: Dalam keadaan standar adalah yang di nonaktifkan, tetapi dapat diaktifkan (perlu mengatur flag menjadi "true" untuk dapat menggunakan WOFF2).