คุณสมบัติแบบย่อ font ใน CSS

ในบทเรียนที่แล้วเราได้เรียนรู้เกี่ยวกับคุณสมบัติสำหรับข้อความหลายอย่าง บ่อยครั้งที่การกำหนดคุณสมบัติแต่ละอย่างแยกกันนั้นค่อนข้างยุ่งยาก ดังนั้นใน CSS เพื่อความสะดวกยิ่งขึ้นจึงมี คุณสมบัติแบบย่อพิเศษชื่อ font คุณสมบัตินี้ช่วยให้สามารถกำหนด ขนาดฟอนต์ ตระกูลฟอนต์ ความหนา ตัวเอียง และระยะห่างระหว่างบรรทัดได้พร้อมกัน

คุณสมบัติที่กล่าวมามีไวยากรณ์ดังนี้:

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

โดยลำดับของคุณสมบัติมีความสำคัญ และคุณสมบัติที่จำเป็นต้องมีคือ font-size และ font-family โปรดสังเกตว่า คุณสมบัติอื่น ๆ นอกเหนือจากที่อธิบายไว้ในไวยากรณ์ข้างต้น ไม่รวมอยู่ในคุณสมบัติแบบย่อนี้นี้

มาดูตัวอย่างกัน

ตัวอย่าง

สมมติว่าเรามีสไตล์ดังต่อไปนี้:

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

ลองเขียนใหม่โดยใช้คุณสมบัติแบบย่อ:

p {
	font: 16px Arial;
}

ตัวอย่าง

สมมติว่าเรามีสไตล์ดังต่อไปนี้:

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

ลองเขียนใหม่โดยใช้คุณสมบัติแบบย่อ:

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

ตัวอย่าง

สมมติว่าเรามีสไตล์ดังต่อไปนี้:

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

ลองเขียนใหม่โดยใช้คุณสมบัติแบบย่อ:

p {
	font: bold 16px Arial;
}

ตัวอย่าง

สมมติว่าเรามีสไตล์ดังต่อไปนี้:

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

ลองเขียนใหม่โดยใช้คุณสมบัติแบบย่อ:

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

แบบฝึกหัด

ย่อรหัสโดยใช้คุณสมบัติแบบย่อ font:

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

ย่อรหัสโดยใช้คุณสมบัติแบบย่อ font:

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

ย่อรหัสโดยใช้คุณสมบัติแบบย่อ font:

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