Contoh
Tentukan font bernama "myFirstFont" , dan menentukan URL mana dapat ditemukan:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
} Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
Dengan @ font-face aturan, web designer yang tidak lagi harus menggunakan salah satu dari "web-safe" font.
Dalam @ font-face aturan baru Anda harus terlebih dahulu menetapkan nama untuk font (eg myFirstFont) , dan kemudian arahkan ke file font.
Tip: Gunakan huruf kecil untuk URL font. huruf besar dapat memberikan hasil yang tak terduga di IE!
Untuk menggunakan font untuk elemen HTML, merujuk pada nama font (myFirstFont) melalui properti font-family:
div
{
font-family: myFirstFont;
}Dukungan Browser
The @ font-face rule didukung di Internet Explorer, Firefox, Opera, Chrome, dan Safari.
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung format font.
| font format | |||||
|---|---|---|---|---|---|
| TTF / OTF | 4.0 | 9.0 * | 3.5 | 3.1 | 10,0 |
| WOFF | 5.0 | 9.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 36.0 | Tidak didukung | 35,0 * | Tidak didukung | 26,0 |
| SVG | 4.0 | Tidak didukung | Tidak didukung | 3.2 | 9.0 |
| EOT | Tidak didukung | 6.0 | Tidak didukung | Tidak didukung | Tidak didukung |
* Ujung dan IE: The font format hanya bekerja ketika diatur menjadi "installable" .
* Firefox: Dinonaktifkan secara default, namun dapat diaktifkan (perlu menetapkan bendera untuk "true" untuk menggunakan WOFF2).
Sintaksis
@font-face
{
font-properties
}| deskripsi Font | Nilai | Deskripsi |
|---|---|---|
| font-family | name | Wajib. Mendefinisikan nama font. |
| src | URL | Wajib. Mendefinisikan URL(s) di mana font harus di-download dari |
| font-stretch | normal kental ultra-kental ekstra-kental semi-kental diperluas semi-diperluas ekstra-diperluas ultra-diperluas | Pilihan. Mendefinisikan bagaimana font harus meregang. Nilai default adalah "normal" |
| gaya tulisan | normal italic miring | Pilihan. Mendefinisikan bagaimana font harus ditata. Nilai default adalah "normal" |
| font-weight | normal berani 100 200 300 400 500 600 700 800 900 | Pilihan. Mendefinisikan keberanian font. Nilai default adalah "normal" |
| unicode-range | unicode-range | Pilihan. Mendefinisikan berbagai karakter unicode font mendukung. Nilai default adalah "U+0-10FFFF" |
Coba Sendiri - Contoh
Contoh
Anda harus menambahkan @ font-face aturan lain yang mengandung deskriptor untuk teks tebal:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Cobalah sendiri " File "sansation_bold.woff" adalah file font lain, yang berisi karakter berani untuk font Sansation.
Browser akan menggunakan ini setiap kali sepotong teks dengan font-family "myFirstFont" harus membuat sebagai tebal.
Dengan cara ini Anda dapat memiliki banyak aturan @ font-face untuk font yang sama.
Pages terkait
CSS3 tutorial: CSS3 Font