CSS

Font Family di CSS: Cara Membuat dan Contoh Sintaknya

CSS memiliki banyak sekali properti yang dapat digunakan untuk memperindah tampilan halaman web, salah satu contohnya adalah properti yang mengatur fonts. Untuk itu pada kesempatan kali ini akan dibahas bagaimana cara menentukan jenis font pada CSS dan contoh penggunannya.

Sebelum itu saya akan menjelasakan apa pengertian dari fonts yang ada di CSS. Fonts pada CSS adalah properti-properti yang digunakan dalam menentukan jenis font, ketebalan font, ukuran font, dan style font pada CSS.

Berikut ini adalah contoh perbedaan jenis font antara Serif dan Sans-Serif.

Contoh Font Family

Font Family pada CSS

Font family pada CSS digunakan untuk mengatur jenis font seperti apa yang kita inginkan. Dalam CSS, ada dua jenis nama font family yaitu:

  • generic family – sekelompok jenis font dengan tampilan yang mirip (seperti “Serif” atau “Monospace”)
  • font family – jenis font yang lebih spesifik (seperti “Times New Roman” atau “Arial”)
Generic familyFont familyDeskripsi
SerifTimes New Roman
Georgia		Font serif memiliki garis-garis kecil di ujung karakternya (beberapa karakter)
Sans-serifArial
Verdana		Sans yang berarti tanpa – font ini kebalikan dari serif yaitu
tidak memiliki garis di akhir karakter
MonospaceCourier New
Lucida Console		Semua karakter monospace memiliki lebar yang sama

Catatan: Pada layar komputer, font sans-serif dianggap lebih mudah dibaca daripada font serif.

Font Family

Mengatur font family dalam CSS dapat dilakukan menggunakan properti font-family.

Properti font-family harus menampung beberapa nama font sebagai sistem “fallback”. Yang berarti jika browser tidak mendukung font pertama, browser mencoba font berikutnya, dan seterusnya.

Cara menggunakan properti font-family pada CSS yang dilakukan pertama adalah menuliskan jenis font yang diinginkan, dan akhiri dengan jenis font dari generic family, untuk membuat browser memilih font yang serupa dalam generic family, jika tidak ada font lain yang tersedia.

Catatan: Jika nama font family yang diinginkan lebih dari satu kata, gunakan tanda petik, seperti: “Times New Roman”.

Penulisan properti font-family ang terdiri lebih dari satu jenis font ditentukan dalam daftar yang dipisahkan koma.

Contoh :

Menentukan font untuk tiga paragraf.

<!DOCTYPE html>
<html>
<head>
<style>
.serif {
  font-family: "Times New Roman", Times, serif;
}

.sansserif {
  font-family: Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: "Lucida Console", Courier, monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="serif">Ini adalah paragraf, yang ditampilkan dengan font Times New Roman.</p>
<p class="sansserif">Ini adalah paragraf, yang ditampilkan dengan font Arial.</p>
<p class="monospace">Ini adalah paragraf, yang ditampilkan dengan font Lucida Console.</p>

</body>
</html>

Contoh:

Menentukan jenis font “Impact” pada paragraf:

<!DOCTYPE html>
<html>
<head>
<style>
p.impact {
  font-family: Impact, Charcoal, sans-serif;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="impact">Ini adalah paragraf, yang ditampilkan dengan font Impact.</p>

</body>
</html>

Sekian pembahasan dan contoh cara penggunaan properti font-family dalam CSS, semoga bermanfaat.


Catur Kurnia Sari

Share
Tags: CSS