20/07/2015

Properti CSS Font Family

20/07/2015

Font memiliki banyak jenis dan semua jenis font itu dinamai dengan font family atau keluarga font, kalau boleh saya ibaratkan, font itu seperti ikan, hewan yang satu ini memiliki banyak jenis dan semua jenis ikan itu tetap dinamai dengan ikan atau keluarga ikan apapun bentuk dan warnanya. Karena itu kita dapat mengatur jenis font apakah yang akan ditampilkan dalam sebuah halaman web menggunakan properti font-family.
Secara garis besar, nilai dari font-family dikelompokkan menjadi dua bagian
  1. Family Name
  2. Generic Family
Jika kita menetapkan Family Name, maka sebaiknya kita juga menambahkan Generic Family di akhir penulisan properti font-family mengingat adanya kemungkinan jenis font yang kita pilih tidak bisa ditampilkan karena tidak tersedia dalam sistem komputer kita. Oleh karena itu, jika font tersebut benar-benar tidak ditemukan, maka browser akan menggunakan standar font-nya masing-masing yaitu Generic Family.


Family Name

Family Name adalah kelompok font yang memilki jenis serupa seperti Trebuchet MS Normal, Trebuchet MS Bold, dan Trebuchet MS Italic. Jenis font ini biasa kita temui ketika kita membuat dokumen dalam office word atau aplikasi sejenis.

Generic Family

Generic Family adalah jenis font standar yang dipersiapkan sebagai pengganti jika font-family yang kita pilih tidak tersedia/terinstal dalam sistem komputer kita. Berikut ini adalah lima jenis Generic Family dengan deskripsi singkat
  1. Serif
    Jenis font ini memiliki detail tebal dan tipis pada setiap tepinya.
  2. Sans-Serif
    Jenis font ini sifatnya lurus tegak ke atas pada tiap tepinya. Untuk resolusi layar yang lebih kecil, font ini sangat cocok karena akan mudah dibaca.
  3. Cursive
    jenis font ini memiliki efek tulis tangan sehinga cocok untuk gambar atau judul website.
  4. Fantasy
    Jenis font ini memiliki tipe yang hampir sama dengan cursive namun akan lebih sempurna bila kita menggunakan browser Internet Explorer.
  5. Monospace
    Jenis font ini memiliki lebar yang sama pada setiap karakternya sehingga lebih cocok untuk penulisan kode karena efeknya seperti hasil dari mesin ketik.

Sintaks CSS

Sintaks CSS Font-Family

p {
   font-family: value (nama font);
  } 
  1. Value dari properti font-family diisi dengan nama font yang kita tentukan
  2. Apapun jenis family name yang kita tentukan sebaiknya diakhiri dengan generic family
  3. Pisahkan dengan tanda koma , antara satu font dengan font yang lain
  4. Jenis font yang terdiri lebih dari satu kata harus diapit dengan tanda petik ganda (double quotes) " " kecuali yang sudah terpisah dengan tanda strip, seperti sans-serif

Contoh

p {
   font-family: "Times New Roman", Times, serif;
  } 

Kombinasi Font Family

Di bawah ini merupakan kombinasi font family berdasarkan generik famili.

Serif

font-family Normal Bold
Georgia, serif

Teks Normal

Teks Tebal.

"Times New Roman", Times, serif

Teks Normal.

Teks Tebal.

"Palatino Linotype", Palatino, "Book Antiqua", serif

Teks Normal.

Teks Tebal.

Sans-Serif

font-family Normal Bold
Arial, Helvetica, sans-serif

Teks Normal.

Teks Tebal.

"Arial Black", Gadget, sans-serif

Teks Normal.

Teks Tebal.

Impact, Charcoal, sans-serif

Teks Normal.

Teks Tebal.

Tahoma, Geneva, sans-serif

Teks Normal.

Teks Tebal.

"Trebuchet MS", Helvetica, sans-serif

Teks Normal.

Teks Tebal.

Verdana, Geneva, sans-serif

Teks Normal.

Teks Tebal.

Monospace

font-family Normal Bold
Courier, monospace

Teks Normal.

Teks Tebal.

"Courier New", Courier, monospace

Teks Normal.

Teks Tebal.

"Lucida Console", Monaco, monospace

Teks Normal.

Teks Tebal.

Cursive

font-family Normal Bold
"Comic Sans MS", cursive

Teks Normal.

Teks Tebal.

"Courier New", Courier, monospace

Teks Normal.

Teks Tebal.

"Lucida Console", Monaco, monospace

Teks Normal.

Teks Tebal.

kembali ke CSS Font dan Teks