property ของ font ใน css นั้นมีอยู่หลายตัวครับ ได้แก่ font-family, font-style, font-variant, font-weight, font-size และ property font แบบรวม แต่ก่อนอื่นมารู้จักลักษณะของ font ก่อนครับ

ลักษณะของ Font

Font สามารถแบ่งเป็นออกได้เป็น 2 ประเภทใหญ่ๆ

Sans-serif : เป็นลักษณะของตัวอักษรที่ไม่มีเส้นปิดหัวปิดท้าย
Serif : เป็นลักษณะของตัวอักษรที่ส้นปิดมีเส้นปิดหัวปิดท้าย

ซึ่งผมคิดว่า Sans-serif เป็นลักษณะของตัวอักษรที่อ่านง่ายกว่า Serif ครับ

Font-Family

Font-Family ใช้กำหนดชนิดหรือประเภทของตัวอักษรบนเว็บครับ ซึ่งก็ขึ้นอยู่ที่เครื่องคอมของคุณแหละครับว่าจะมี font ที่กำหนดนี้ไว้หรือป่าว โดยทั่วไปจะเขียนกับกับไว้ว่าหาก Font-Family ที่อยู่ใน ” ” ไม่มี ให้เอาตัวหลังตัวอื่นมาแทนตามลำดับ

เช่น : font-family: “Lucida Grande”, Arial, Tahoma;
หมายความว่า หาก font “Lucida Grande” ในเครื่องไม่มี ให้เอา Arial มาแสดง แทน

font-style : ใช้กำหนดรูปแบบของตัวอักษร

ใช้กำหนดรูปแบบของตัวอักษรว่าจะเป็นอย่างไร normal ( ธรรมดา ) italic ( ตัวเอียง ) เป็นต้น

เช่น font-style: italic;

font-variant : ใช้กำหนดตัวอักษรให้เป็นแบบ small-caps

เป็นการแปลงตัวอักษรที่เป็นตัวพิมพ์เล็ก ให้กลายเป็นตัวพิมพ์ใหญ่ทั้งหมด โดยที่ขนาดยังคงเล็กเท่าตัวพิมพ์เล็ก

เช่น font-variant: smapp-caps;

font-weight : ใช้กำหนดขนาดความหนาของตัวอักษร

เช่น font-weight: bold;

font-size : ใช้กำหนดขนาดของตัวอักษร

เช่น font-size: 14px;

font : ใช้กำหนดค่าของ property font แบบรวม

ใช้กำหนดค่าของ property font แบบรวมทั้ง font-style, font-variant, font-weight, font-size, font-family ได้พร้อมกันตามลำดับ

เช่น font: italic small-caps bold 14px Lucida Grande;

ขอขอบคุณข้อมูลภาพจาก
http://www.w3schools.com/css/css_font.asp