font-family
Properti CSS font-family menentukan keluarga font yang akan digunakan untuk konten elemen.
Khususnya properti ini mendefinisikan daftar prioritas nama font family dan atau nama generic family yang akan digunakan.
Nama font family yang ditentukan dipisahkan oleh koma, menunjukkan bahwa mereka adalah alternatif satu sama lain.
Browser akan memilih font dari daftar yang diinstal pada komputer, atau yang dapat diunduh menggunakan informasi yang
disediakan oleh @font-face.
Contoh:
font-family: Helvetica, Verdana, sans-serif;
Browser pertama-tama akan menerapkan font family pertama yang ditentukan dalam daftar.
Jika tidak valid atau tidak keluar atau gagal memuat font yang ditentukan, ia mencoba menerapkan font kedua, lalu yang ketiga, dan keempat, hingga akhir daftar..
Jika tidak ada font family yang ditentukan yang tersedia, browser kembali ke font default yang ditentukan dalam sistem operasi.
Pada contoh diatas, jika Helvetica tersedia, ia akan digunakan saat rendering.
Jika Helvetica atau Verdana tidak ada, maka font sans serif yang ditentukan browser akan digunakan.
Ada dua jenis nama font family: nama font family dan nama generic family.
- Nama font family adalah nama font yang sebenarnya, seperti “Helvetica”, “Arial”, “Times New Roman”, “Open Sans”, “Lato”, dll.
Nama font family harus diberikan dikutip sebagai string, atau tidak dikutip sebagai urutan satu atau lebih pengidentifikasi.
Ini berarti sebagian besar karakter tanda baca dan angka pada awal setiap token harus diloloskan dengan nama font family yang tidak dikutip.
Misalnya, deklarasi berikut tidak valid:
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;
Untuk menghindari kesalahan, jika nama keluarga mengandung banyak kata, dipisahkan oleh spasi, digit, atau karakter tanda baca selain tanda hubung, disarankan untuk mencantumkan nama keluarga dalam tanda kutip (tunggal atau ganda).
font-family: "New Century Schoolbook", serif;
font-family: "21st Century", fantasy;
- Nama generic family adalah nama yang biasanya digunakan sebagai mekanisme mundur, yang memberi tahu browser jenis font apa yang akan digunakan jika tidak ada font family tertentu yang tersedia.
Saat beberapa nama font ditentukan, kamu disarankan untuk memasukkan nama generic font pada bagian akhir daftar untuk memberikan cadangan ketika font family yang diinginkan tidak tersedia.
Nama generic font biasanya kata kunci. Kata kunci generic font didefinisikan seperti: ‘serif', ‘sans-serif', ‘cursive', ‘fantasy', dan ‘monospace'.
Karena nama generic font adalah kata kunci, mereka tidak boleh pakai dikutip. Dalam contoh di atas, “serif” dan “fantasi” adalah nama generic family yang disediakan.
CSS Syntax
font-family: family-name | generic-family | initial | inherit;
JavaScript Syntax
object.style.fontFamily="Verdana,sans-serif"
| Default value: | tergantung pada browser |
|---|---|
| Inherited: | ya |
| Animatable: | tidak Read about animatable |
| Version: | CSS1 |
Attribute Value
font-family: 'Source Sans Pro', 'Arial', sans-serif;
Saat menggunakan beberapa nilai, daftar font-family dari keluarga font mendefinisikan prioritas di mana browser
harus memilih keluarga font.
Browser akan mencari setiap keluarga di komputer pengguna dan di setiap sumber file @font-face.
Daftar ini diprioritaskan dari kiri ke kanan: dan akan menggunakan nilai pertama jika tersedia, atau pergi ke yang berikutnya, sampai akhir daftar tercapai. Keluarga font default ditentukan oleh preferensi browser.
Dalam contoh ini, browser akan mencoba menggunakan Source Sans Pro jika tersedia. Jika tidak dapat menemukannya, ia
akan mencoba menggunakan Arial. Jika tidak tersedia, itu akan menggunakan font sans-serif browser.
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;