Ciri Singkatan font dalam CSS

Dalam pelajaran sebelumnya, kita telah membincangkan banyak ciri untuk teks. Seringkali menyusahkan untuk menetapkan setiap ciri ini secara berasingan, oleh itu dalam CSS untuk kemudahan yang lebih besar terdapat ciri singkatan khas font. Ciri ini membolehkan anda menetapkan secara serentak saiz fon, keluarga, ketebalan, gaya condong dan jarak antara baris.

Ciri yang diterangkan mempunyai sintaks berikut:

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

Dalam hal ini, susunan ciri adalah penting, dan yang wajib ialah font-size dan font-family. Perhatikan bahawa ciri-ciri lain, selain yang diterangkan di atas dalam sintaks, tidak termasuk dalam ciri singkatan ini.

Mari kita lihat contohnya.

Contoh

Katakan kita mempunyai gaya berikut:

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

Mari kita tulis semula menggunakan ciri singkatan:

p {
	font: 16px Arial;
}

Contoh

Katakan kita mempunyai gaya berikut:

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

Mari kita tulis semula menggunakan ciri singkatan:

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

Contoh

Katakan kita mempunyai gaya berikut:

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

Mari kita tulis semula menggunakan ciri singkatan:

p {
	font: bold 16px Arial;
}

Contoh

Katakan kita mempunyai gaya berikut:

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

Mari kita tulis semula menggunakan ciri singkatan:

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

Tugas Praktikal

Permudahkan kod dengan menggunakan ciri singkatan font:

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

Permudahkan kod dengan menggunakan ciri singkatan font:

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

Permudahkan kod dengan menggunakan ciri singkatan font:

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