Ciri font-size

Ciri font-size menetapkan saiz fon teks. Nilai bagi ciri ini adalah sebarang unit untuk saiz (biasanya, ini ialah px, em atau rem) atau kata kunci khas (digunakan sangat jarang).

Sintaks

pemilih {
	font-size: nilai;
}

Nilai dalam bentuk kata kunci

Nilai	Keterangan
`xx-small`	Paling paling kecil. Contoh: Lorem ipsum dolor sit amet.
`x-small`	Paling kecil. Contoh: Lorem ipsum dolor sit amet.
`small`	Kecil. Contoh: Lorem ipsum dolor sit amet.
`medium`	Sederhana. Contoh: Lorem ipsum dolor sit amet.
`large`	Besar. Contoh: Lorem ipsum dolor sit amet.
`x-large`	Sangat besar. Contoh: Lorem ipsum dolor sit amet.
`xx-large`	Paling besar. Contoh: Lorem ipsum dolor sit amet.
`larger`	Lebih besar daripada fon elemen induk dengan nilai tertentu.
`smaller`	Lebih kecil daripada fon elemen induk dengan nilai tertentu.

Nilai lalai: medium.

Contoh

Mari kita tetapkan saiz fon untuk perenggan kepada 20px:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-size: 20px;
}

Contoh

Dalam contoh ini, saiz untuk perenggan ditetapkan kepada 16px, dan untuk span di dalamnya - 150%. Dalam kes ini, saiz fon untuk span akan menjadi 150% daripada induknya, iaitu perenggan, dan saiz sebenarnya akan menjadi 16px * 150% = 24px:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: 150%;
}

Contoh

Dalam contoh ini, saiz untuk perenggan ditetapkan kepada 16px, dan untuk span di dalamnya - larger. Dalam kes ini, saiz fon untuk span akan lebih besar daripada induknya (perenggan):

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: larger;
}

Contoh

Perhatikan bahawa fon dengan font-family yang berbeza dan font-size yang sama secara visual mungkin berbeza saiznya (untuk menyelesaikan masalah ini lihat ciri font-size-adjust).

Dalam contoh di bawah, kedua-dua perenggan mempunyai font-size 16px, tetapi font-family yang berbeza:

<p id="elem1">
	Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
	Lorem ipsum dolor sit amet.
</p>

#elem1 {
	font-size: 16px;
	font-family: Arial;
}
#elem2 {
	font-size: 16px;
	font-family: "Times New Roman";
}