Font Shorthand di CSS: Contoh dan Cara Membuatnya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari September 24, 2020

Pada kesempatan kali ini, akan dibahas mengenai font shorthand atau properti font pada CSS. Bagaimana cara penggunaannya dan apa fungsinya? Berikut akan dijelaskan secara rinci.

Properti Font

Properti font digunakan untuk mempersingkat kode program, penggunaan properti font memungkinkan untuk menyatukan properti font individual menjadi satu properti.

Properti font adalah properti untuk menggabungkan properti font individu dibawah ini :

font-style
font-variant
font-weight
font-size/line-height
font-family

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>

<h1>Properti Font</h1>

<p class="a">ini adalah sebuah paragraf. Ukuran font 20 pixel, dan jenis font adalah Arial.</p>

<p class="b">Ini adalah sebuah paragraf. Font dibuat menjadi miring dan tebal, ukuran font 12 pixel, tinggi baris 30 pixel, dan jenis font adalah Georgia.</p>

</body>
</html>

Catatan: Nilai font-size dan font-family penting. Jika salah satu dari nilai tidak ada, maka akan digunakan nilai defaultnya.

Semua Properti Font pada CSS

Properti	Deskripsi
font	Mengatur semua properti font dalam satu deklarasi
font-family	Menentukan jenis font pada teks
font-size	Menentukan ukuran teks
font-style	Menentukan style font dalam teks
font-variant	Menentukan apakah teks harus ditampilkan dalam small-caps kecil atau tidak
font-weight	Menentukan tebal font