Sintaks dari Properti Font-Family
Desain tipografi adalah bagian yang sangat penting dari desain situs web yang sukses. Membuat situs dengan teks yang mudah dibaca dan yang terlihat hebat adalah tujuan dari setiap profesional desain web. Untuk mencapai ini, Anda harus dapat mengatur font tertentu yang ingin Anda gunakan pada halaman web Anda. Untuk menentukan jenis huruf atau keluarga font pada dokumen Web Anda, Anda akan menggunakan properti gaya font-family di CSS Anda.
Gaya font-family paling sederhana yang dapat Anda gunakan hanya akan menyertakan satu font family:
p {font-family: Arial; }Jika Anda menerapkan gaya ini ke halaman, semua paragraf akan ditampilkan dalam keluarga font "Arial". Ini bagus dan karena "Arial" adalah apa yang dikenal sebagai "web-safe font", yang berarti sebagian besar (jika tidak semua) komputer akan menginstalnya, Anda dapat beristirahat dengan mudah mengetahui bahwa halaman Anda akan ditampilkan dalam font yang dimaksudkan .
Jadi apa yang terjadi jika font yang Anda pilih tidak dapat ditemukan? Misalnya, jika Anda tidak menggunakan "font web aman" pada halaman, apa yang dilakukan agen pengguna jika mereka tidak memiliki font itu? Mereka melakukan substitusi.
Ini dapat menghasilkan beberapa halaman yang tampak sangat lucu. Saya pernah pergi ke halaman di mana komputer saya ditampilkan sepenuhnya dalam "Wingdings" (sebuah ikon-set) karena komputer saya tidak memiliki font yang ditetapkan pengembang, dan browser saya membuat pilihan yang sangat buruk dalam font apa yang akan gunakan sebagai pengganti. Halaman itu benar-benar tidak dapat dibaca untuk saya! Di sinilah tumpukan font ikut bermain.
Pisahkan Beberapa Huruf Keluarga dengan Koma di Tumpukan Font
A "tumpukan font" adalah daftar font yang Anda ingin halaman Anda gunakan. Anda akan menempatkan pilihan font Anda sesuai dengan preferensi Anda dan memisahkan masing-masing dengan koma. Jika browser tidak memiliki keluarga font pertama pada daftar, itu akan mencoba yang kedua dan kemudian yang ketiga dan seterusnya sampai ia menemukan yang ada pada sistem.
font-family: Pussycat, Aljazair, Broadway;Dalam contoh di atas, peramban akan terlebih dahulu mencari font "Pussycat", lalu "Aljazair" lalu "Broadway" jika tidak ada font lain yang ditemukan. Ini memberi Anda lebih banyak peluang bahwa setidaknya satu dari font yang Anda pilih akan digunakan. Ini tidak sempurna, itulah mengapa kami memiliki lebih banyak lagi yang dapat kami tambahkan ke tumpukan font kami (baca terus!).
Gunakan Generic Fonts Last
Jadi Anda dapat membuat tumpukan font dengan daftar font dan masih belum menemukan browser mana pun. Anda jelas tidak ingin halaman Anda ditampilkan tidak dapat dibaca jika browser membuat pilihan substitusi yang buruk. Untungnya CSS memiliki solusi untuk ini juga: font generik .
Anda harus selalu mengakhiri daftar font Anda (bahkan jika itu adalah daftar satu keluarga atau hanya font web aman) dengan font generik. Ada lima yang bisa Anda gunakan:
- kursif
- fantasi
- monospace
- Sans Serif
- serif
Kedua contoh di atas mungkin diubah menjadi:
font-family: Arial, sans-serif; font-family: Pussycat, Aljazair, Broadway, fantasi;Beberapa Nama Keluarga Font adalah Dua Kata atau Lebih
Jika keluarga font yang ingin Anda gunakan lebih dari satu kata, maka Anda harus mengelilinginya dengan tanda kutip ganda. Sementara beberapa browser dapat membaca keluarga font tanpa tanda kutip, mungkin ada masalah jika ruang kosong dikondensasikan atau diabaikan.
font-family: "Times New Roman", serif;Dalam contoh ini, Anda dapat melihat bahwa nama font "Times New Roman", yang multi-kata, terbungkus dalam tanda kutip. Ini memberitahu browser bahwa ketiga kata-kata ini adalah bagian dari nama font, sebagai lawan dari tiga font yang berbeda semua dengan nama satu kata.
Artikel asli oleh Jennifer Krynin. Diedit pada 12/2/16 oleh Jeremy Girard