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

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

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

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

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

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

ตัวอย่าง

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

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

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

cssp {
  font: 16px Arial;
}

ตัวอย่าง

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

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

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

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

ตัวอย่าง

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

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

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

cssp {
  font: bold 16px Arial;
}

ตัวอย่าง

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

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

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

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

แบบฝึกหัด

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

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

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