Aturan CSS3 @ font-face
contoh
Tentukan font bernama "myFirstFont", dan tentukan di mana untuk menemukan URL-nya:
{
font-family: myFirstFont;
src: url ( 'Sansation_Light.ttf'),
url ( 'Sansation_Light.eot'); / * IE9 * /
}
Coba »
Dukungan Browser
Internet Explorer 9, Firefox, Opera, Chrome, dan Safari dukungan @ font-face aturan.
Namun, Internet Explorer 9 hanya mendukung .eot jenis font, Firefox, Chrome, Safari, dan Opera dukungan .ttf dan .otf dua jenis font.
Catatan: Internet Explorer 8 dan versi sebelumnya dari IE tidak mendukung @ font-face aturan.
Definisi atribut dan petunjuk
@ Aturan Font-face, web desainer tidak lagi harus menggunakan "web-aman" font satu.
Nama font, font yang - aturan wajah:
- font-family: myFirstFont;
file font yang terdapat pada server Anda di suatu tempat, referensi CSS:
- src: url ( 'Sansation_Light.ttf')
Jika file font di lokasi yang berbeda, menggunakan URL lengkap:
- src: url ( 'id/id/ www.w3cschool.css / CSS3 / Sansation_Light.ttf')
Sekarang siap untuk menggunakan font, berikut ini adalah contoh bagaimana menggunakannya semua elemen div:
{
font-family: myFirstFont;
}
sintaks:
- @ Font-face
{
font-sifat
}
Contoh berikut font yang digunakan di div:
{
font-family: myFirstFont;
}
tatabahasa
{
font-sifat
}
| deskripsi font | nilai | penjelasan |
|---|---|---|
| font-family | nama | Diperlukan. Menentukan nama font. |
| src | URL | Diperlukan. Tentukan URL huruf download (S) |
| font-stretch | normal kental ultra-kental ekstra-kental semi-kental diperluas semi-diperluas ekstra-diperluas ultra-diperluas | Opsional. Mendefinisikan bagaimana font harus meregang. Nilai default adalah "normal" |
| font-style | normal italic miring | Opsional. Tentukan gaya font harus seperti. Nilai default adalah "normal" |
| font-weight | normal berani 100 200 300 400 500 600 700 800 900 | Opsional. Sebuah berat font kustom. Nilai default adalah "normal" |
| unicode-range | unicode-range | Opsional. Kisaran didefinisikan font mendukung karakter Unicode. Nilai default adalah "u + 0-10 FFFF" |
Artikel terkait
CSS3 tutorial: CSS3 Font
