วันจันทร์ที่ 5 ธันวาคม พ.ศ. 2559

การใช้สไตล์ชีทในการกำหนดคุณลักษณะของตัวอักษร ตอนที่ 1

Using the CSS Font Properties (Part 1)

1. การกำหนดสกุลอักษร (Specifying Font Family)

    ในการให้เว็บเพจแสดงผลตัวอักษรให้มีลักษณะเป็นไปตามที่ผู้ออกแบบได้ออกแบบไว้นั้น จำต้องมีการกำหนดสกุลให้แก่อักษร เพื่อทราบว่าลักษณะอักษรนั้นจะมีรูปแบบอย่างไร การกำหนดสกุลอักษร (font family) มีรูปแบบพื้นฐาน ดังนี้
font-family: sans-serif;
    หาก font family มีชื่อหลายคำ ให้กำหนด “” ครอบ เช่น “Times New Roman” และ หากมีการกำหนด font family ลำดับรอง ให้ขั้นด้วย เครื่องหมาย Comma
font-family: “Times New Roman”, sans-serif;
    การกำหนดสกุลอักษร โดยใช้ชื่อสกุลสามัญ (generic names) ซึ่งชื่อสกุลสามัญ คือ font family ที่สามารถนำมาใช้ได้ทันที และเป็นที่ทราบโดยทั่วกันว่าจะสามารถแสดงผลบนเว็บเบราเซอร์ได้หลากหลาย
font-family: serif;
font-family: sans-serif; 
font-family: cursive;
font-family: fantasy;
font-family: monospace; 
    Serif แปลว่า เส้นเล็กๆ ของตัวพิมพ์ที่ทำให้เด่นชัด
    Sans แปลว่า ปราศจาก
    Sans-Serif แปลว่า ปราศจากเส้นเล็กๆของตัวพิมพ์

    Font Family ในสกุล Sans-Serif มีอีกหลายลักษณะ เช่น สกุล Arial และ สกุล Helvetica ดังตัวอย่างในภาพ

















ตัวอย่าง
การกำหนดสกุลอักษรสามัญ Generic Font Families
p { font-family: sans-serif; }

การระบุเจาะจงสกุลอักษรด้วย “”  Specific Font Families
p { font-family: "lucida console"; }

การระบุสกุลอักษรแบบลำดับ  Font Fallbacks
p { font-family: arial, helvetica; }

ข้อควรระวัง
ในการกำหนดสกุลอักษรนั้น เมื่อแสดงผลบนเว็บเบราเซอร์แต่ละยี่ห้ออาจให้ลักษณะของตัวอักษรที่แตกต่างกัน ดังภาพ


ไม่มีความคิดเห็น:

แสดงความคิดเห็น