คุณสมบัติ font-family

คุณสมบัติ font-family กำหนด ประเภทของฟอนต์

ไวยากรณ์

ตัวเลือก {
	font-family: ชื่อฟอนต์;
}

หมายเหตุ

หากชื่อฟอนต์มีช่องว่าง เช่น Times New Roman ควรจะอยู่ใน เครื่องหมายคำพูดเดี่ยวหรือคู่

หมายเหตุ

คุณสามารถระบุฟอนต์ที่คล้ายกันหลายตัวได้ โดยคั่นด้วยเครื่องหมายจุลภาค เมื่อเบราว์เซอร์พบฟอนต์แรก ในรายการ มันจะตรวจสอบการมีอยู่ของฟอนต์นั้นในคอมพิวเตอร์ ของผู้ใช้ หากไม่มีฟอนต์ดังกล่าว จะใช้ ฟอนต์ถัดไปในรายการและตรวจสอบ การมีอยู่เช่นเดียวกัน ดังนั้นการระบุฟอนต์หลายตัว จะเพิ่มโอกาสที่อย่างน้อยหนึ่งฟอนต์ จะพบในคอมพิวเตอร์ของผู้ใช้

รายการมักจะจบด้วยคำสำคัญ ที่อธิบายประเภทของฟอนต์ (ฟอนต์ทั้งหมด เป็นประเภทใดประเภทหนึ่ง) - serif, sans-serif, cursive, fantasy หรือ monospace หากเบราว์เซอร์ไม่พบฟอนต์ที่ระบุใด ๆ ในคอมพิวเตอร์ของผู้ใช้ มัน จะเลือกฟอนต์หนึ่งจากประเภทที่ระบุ

ประเภทของฟอนต์

ประเภท	คำอธิบาย
`serif`	ฟอนต์ที่มีเชิง (Serif)
`sans-serif`	ฟอนต์ที่ไม่มีเชิง (Sans-serif)
`cursive`	ฟอนต์แบบตัวเอียง/ลายมือเขียน (Cursive)
`fantasy`	ฟอนต์ตกแต่งด้วยลวดลายที่สวยงามและเอฟเฟกต์ที่ไม่ธรรมดา
`monospace`	ฟอนต์แบบ Monospace ความกว้างของแต่ละตัวอักษรเท่ากัน

ค่าเริ่มต้น: ฟอนต์ที่ตั้งค่า ในเบราว์เซอร์เป็นค่าเริ่มต้น โดยทั่วไปคือ Times New Roman

ตัวอย่าง

มากำหนดตระกูลฟอนต์เป็น Arial:

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

p {
	font-family: Arial;
}

ตัวอย่าง

มากำหนดตระกูลฟอนต์เป็น Times New Roman เนื่องจากชื่อฟอนต์ประกอบด้วยหลายคำ จึงต้องใส่เครื่องหมายคำพูด:

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

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

ตัวอย่าง

มากำหนดฟอนต์จากกลุ่ม serif (โดยส่วนใหญ่จะใช้ Times New Roman):

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

p {
	font-family: serif;
}

ตัวอย่าง

มากำหนดฟอนต์จากกลุ่ม sans-serif (โดยส่วนใหญ่จะใช้ Arial):

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

p {
	font-family: sans-serif;
}

ตัวอย่าง

มากำหนดฟอนต์จากกลุ่ม fantasy (อาจจะไม่ทำงานหากไม่มี ฟอนต์ดังกล่าว):

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

p {
	font-family: fantasy;
}

ตัวอย่าง

มากำหนดฟอนต์จากกลุ่ม monospace (ตัวอักษรจะมีขนาดเท่ากัน):

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

p {
	font-family: monospace;
}