Properti Singkatan font dalam CSS

Dalam pelajaran sebelumnya kita telah membahas banyak properti untuk teks. Seringkali cukup merepotkan menuliskan masing-masing properti ini secara terpisah, oleh karena itu dalam CSS untuk kenyamanan yang lebih besar terdapat properti singkatan khusus font. Properti ini memungkinkan untuk mengatur secara bersamaan ukuran font, keluarga, ketebalan, gaya miring dan jarak antar baris.

Properti yang dijelaskan memiliki sintaksis berikut:

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

Dalam hal ini urutan properti memiliki arti, dan yang wajib adalah font-size dan font-family. Perhatikan bahwa properti lain, selain yang dijelaskan di atas dalam sintaksis, tidak termasuk dalam properti singkatan ini.

Mari kita lihat contohnya.

Contoh

Misalkan kita memiliki gaya berikut:

p {
	font-size: 16px;
	font-family: Arial;
}

Mari kita tulis ulang menggunakan properti singkatan:

p {
	font: 16px Arial;
}

Contoh

Misalkan kita memiliki gaya berikut:

p {
	font-size: 16px;
	font-family: Arial;
	line-height: 50px;
}

Mari kita tulis ulang menggunakan properti singkatan:

p {
	font: 16px/50px Arial;
}

Contoh

Misalkan kita memiliki gaya berikut:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
}

Mari kita tulis ulang menggunakan properti singkatan:

p {
	font: bold 16px Arial;
}

Contoh

Misalkan kita memiliki gaya berikut:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
	line-height: 50px;
	font-style: italic;
}

Mari kita tulis ulang menggunakan properti singkatan:

p {
	font: bold italic 16px/50px Arial;
}

Tugas Praktis

Persingkat kode berikut menggunakan properti singkatan font:

p {
	font-family: "Times New Roman";
	font-size: 13px;
	line-height: 20px;
}

Persingkat kode berikut menggunakan properti singkatan font:

p {
	width: 300px;
	font-family: Arial;
	color: red;
	font-size: 40px;
	font-weight: bold;
}

Persingkat kode berikut menggunakan properti singkatan font:

p {
	font-family: Arial;
	font-size: 40px;
	font-weight: bold;
	text-indent: 50px;
	font-style: italic;
	line-height: 60px;
}