Ciri font-family

Ciri font-family menetapkan jenis fon.

Sintaks

pemilih {
	font-family: nama fon;
}

Nota

Jika nama fon mengandungi ruang, contohnya, Times New Roman, ia mesti diletakkan dalam tanda petik tunggal atau berganda.

Nota

Beberapa fon yang serupa boleh disenaraikan dipisahkan dengan koma. Apabila pelayar menemui fon pertama dalam senarai, ia menyemak ketersediaannya pada komputer pengguna. Jika fon tersebut tiada, fon berikutnya dalam senarai diambil dan juga dianalisis untuk kehadiran. Oleh itu, beberapa fon meningkatkan kebarangkalian bahawa sekurang-kurangnya satu daripadanya akan dikesan pada komputer klien.

Senarai biasanya diakhiri dengan kata kunci, yang menerangkan jenis fon (semua fon tergolong dalam beberapa jenis) - serif, sans-serif, cursive, fantasy atau monospace. Jika pelayar tidak menemui sebarang fon yang dinyatakan pada komputer pengguna, maka ia akan memilih satu fon daripada jenis yang dinyatakan.

Jenis Fon

Jenis	Penerangan
`serif`	Fon dengan serif (kaki).
`sans-serif`	Fon tanpa serif.
`cursive`	Fon kursif.
`fantasy`	Fon hiasan dengan lingkaran cantik dan kesan luar biasa.
`monospace`	Fon monospace, di mana lebar setiap aksara adalah sama.

Nilai lalai: fon yang ditetapkan dalam pelayar secara lalai. Biasanya ini ialah Times New Roman.

Contoh

Mari tetapkan keluarga fon kepada Arial:

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

p {
	font-family: Arial;
}

Contoh

Mari tetapkan keluarga fon kepada Times New Roman. Oleh kerana nama fon terdiri daripada beberapa perkataan, kita letakkannya dalam tanda petik:

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

p {
	font-family: "Times New Roman";
}

Contoh

Mari tetapkan fon daripada kumpulan serif (kemungkinan besar Times New Roman akan digunakan):

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

p {
	font-family: serif;
}

Contoh

Mari tetapkan fon daripada kumpulan sans-serif (kemungkinan besar Arial akan digunakan):

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

p {
	font-family: sans-serif;
}

Contoh

Mari tetapkan fon daripada kumpulan fantasy (mungkin tidak berfungsi untuk anda disebabkan ketiadaan fon sedemikian):

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

p {
	font-family: fantasy;
}

Contoh

Mari tetapkan fon daripada kumpulan monospace (huruf akan menjadi saiz yang sama):

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

p {
	font-family: monospace;
}