Aturan @font-face CSS

  • Halaman Sebelumnya
  • Halaman Berikutnya

Definisi dan penggunaan

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

Pada aturan @font-face, Anda harus pertama-tama mendefinisikan nama font (contoh: myFirstFont), kemudian arahkan ke berkas font.

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

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

div {
  font-family: myFirstFont;
}

Lihat pula:

Panduan CSS:Font Web CSS

Contoh

Tentukan font yang bernama "myFirstFont" dan tentukan URL yang dapat ditemukan nya:

@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
}
Font descriptor Nilai Deskripsi
font-family name Wajib. Definisi nama font.
src URL Wajib. Definisi URL unduh font.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Pilihan. Definisi bagaimana font harus dijalurkan. Nilai default adalah "normal".
font-style
  • normal
  • italic
  • oblique
 Pilihan. Definisi gaya font. Nilai default adalah "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Pilihan. Definisi tebal font. Nilai default adalah "normal".
unicode-range unicode-range Pilihan. Definisi rentang Unicode yang didukung font. Nilai default adalah "U+0-10FFFF".

Banyak lagi contoh

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 teks yang diatur untuk muncul tebal saat mengatur keluarga font "myFirstFont", peramban akan menggunakannya.

Dengan cara ini, Anda dapat menata 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 kondisi defaultnya ditahan, tetapi dapat diaktifkan (perlu mengatur flag menjadi "true" untuk dapat menggunakan WOFF2).

  • Halaman Sebelumnya
  • Halaman Berikutnya