คุณสมบัติแบบย่อ 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;
}