คุณสมบัติ font

คุณสมบัติ font เป็นคุณสมบัติแบบย่อ ซึ่งสามารถใช้คุณสมบัติ CSS ต่อไปนี้ได้: font-size, font-style, font-weight, line-height, font-family, font-variant

ไวยากรณ์

cssตัวเลือก {
  font: [font-style|font-variant|font-weight] font-size [/line-height] font-family;
}

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

คุณสมบัติ font-style, font-variant, font-weight สามารถสลับตำแหน่ง ลำดับกันได้ตามใจชอบ

โปรดสังเกตว่าคุณสมบัติ line-height เขียนด้วยเครื่องหมายทับ (/) หลังคุณสมบัติ font-size

ตัวอย่าง

มาสร้างข้อความแบบเอียงขนาด 15px ประเภท Arial และระยะห่างระหว่างบรรทัด 30px กัน:

html<p>
  some long text
</p>

cssp {
  font: italic 15px/30px Arial;
  text-align: justify;
}

Результат:

ตัวอย่าง

อีกหนึ่งตัวอย่าง:

html<p>
  some long text
</p>

cssp {
  font: bold 16px/20px "Times New Roman", Georgia, serif;
  text-align: justify;
}

Результат:

ตัวอย่าง

กำหนดเฉพาะขนาดฟอนต์และตระกูลฟอนต์ โดยละคุณสมบัติอื่นๆ:

html<p>
  some long text
</p>

cssp {
  font: 18px Arial;
  text-align: justify;
}

Результат:

ตัวอย่าง

หากกำหนดเฉพาะขนาดฟอนต์ มันจะไม่ทำงาน เพราะต้องกำหนดตระกูลฟอนต์เพิ่มเติมด้วย:

html<p>
  some long text
</p>

cssp {
  font: 30px;
  text-align: justify;
}

Результат: