คุณสมบัติฟอนต์ใน CSS ช่วยให้เราสามารถปรับเปลี่ยนลักษณะของข้อความได้ คุณสมบัติต่อไปนี้ช่วยให้เราจัดสไตล์ข้อความ:
font-family
คุณสมบัตินี้ใช้สำหรับตั้งค่าแบบอักษร (font face) สำหรับองค์ประกอบ
font-kerning
เพื่อทำให้ระยะห่างระหว่างตัวอักษรสม่ำเสมอและเพิ่มความอ่านง่าย คุณสมบัติ font-kerning ถูกใช้ อย่างไรก็ตาม คุณสมบัตินี้ขึ้นอยู่กับฟอนต์เฉพาะ
font-size
คุณสมบัติ font-size ตั้งค่าขนาดของฟอนต์
font-stretch
บางฟอนต์มีหน้าตาเพิ่มเติม เช่น condensed, bold ฯลฯ คุณสมบัติ font-stretch ใช้ระบุค่าเหล่านี้
font-style
เพื่อทำให้ข้อความเอียง (italicize) ด้วยมุม คุณสมบัติ font-style ถูกใช้
font-variant
font-variant อนุญาตให้เราระบุว่าองค์ประกอบควรแสดงเป็น small caps หรือไม่
font-weight
ความหนาของตัวอักษรถูกระบุโดยคุณสมบัติ font-weight
เราสามารถใช้คุณสมบัติ font ซึ่งเป็น shorthand สำหรับคุณสมบัติทั้งหมดข้างต้นได้
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ font มีดังนี้:
Selector { font: /*value*/ }
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS font:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> div { margin: 3px; float: left; font-family: "Matura MT Script Capitals"; font-size: 200%; } #a { font-style: normal; } #b { font-style: italic; } #c { font-style: oblique 40deg; font-family: "Harlow Solid Italic"; } </style> </head> <body> <div id="a">Normal Demo</div> <div id="b">Italic Demo</div> <div id="c">Oblique Demo</div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> * { font-size: 1.1em; list-style: circle; } li:first-child { background-color: seashell; font-family: cursive; } li:nth-child(2) { background-color: azure; font-family: "Brush Script Std", serif; } li:last-child { background-color: springgreen; font-family: "Gigi", Arial; } </style> </head> <body> <h2>Learning Scala</h2> <ul> <li>Scala is a pure object-oriented language in the sense that every value is an object.</li> <li>Scala is compiled into Java Byte Code which is executed by the Java Virtual Machine (JVM).</li> <li>Scala provides a lightweight syntax for defining anonymous functions</li> </ul> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
