การกำหนดลักษณะตัวอักษร
เราสามารถกำหนดลักษณะตัวอักษรโดยใช้ css ได้ไม่ว่าจะเป็น กลุ่มหรือลักษณะตระกูลของตัวอักษร (font family) ลักษณะความกว้างของตัวอักษร ขนาดตัวอักษร เป็นต้น
ลักษณะตัวอักษร
css สามารถการกำหนดคุณสมบัติของ font family (ตระกูลของตัวอักษร) ความหนาของตัวอักษร ขนาดตัวอักษร และรูปแบบตัวอักษร
font family
ตระกูลของ font สามารถกำหนดคุณสมบัติจาก font-family คุณสมบัติของ font-family คือ เมื่อ browser ไม่สามารถรองรับหรือเรียกใช้ font ตัวแรกได้ browser นั้นก็จะเรียกใช้ font ตัวถัดไป
font style: ลักษณะ font
คุณสมบัติของการกำหนดรูปแบบ font สามารถกำหนดค่าสำหรับ font style ได้ 3 รูปแบบดังนี้
- normal: แสดงลักษณะ font เป็นแบบอักษรปกติ
- italic: แสดงลักษณะ font เป็นแบบอักษรเอียง
- oblique: แสดงลักษณะ font เป็นแบบแนวทแยง
p{font-style:italic;}
p{font-style:oblique;}
font size: ขนาดของตัวอักษร
กำหนดคุณสมบัติขนาดของตัวอักษร สามารถกำหนดค่าเป็นแบบ absolute หรือ relative
แบบ absolute
- กำหนดชุดตัวอักษรเป็นแบบที่กำหนดไว้
- ไม่อนุญาตให้ผู้ใช้เปลี่ยนขนาดของ font โดยใช้ browser
- ประโยชน์ของการกำหนดตัวอักษรเป็นแบบ absolute size ดังกล่าวนี้ font จะมีลักษณะทางกายภาพที่แท้จริง
แบบ relative
- กำหนดชุดตัวอักษรโดยรอบให้มีความสัมพันธ์กัน
- อนุญาตให้ผู้ใช้เปลี่ยนขนาดของ font โดยใช้ browser
กำหนดขนาดของ font เป็น pixels
ควบคุมขนาดของ font โดยกำหนดขนาดของ font เป็นค่า pixels การกำหนดขนาดของ font เป็นแบบ pixels นี้จะมีปัญหากับการแสดงผลของ browser นั่นก็คือใน browser ที่แตกต่างกันจะอ่านค่าและแสดงผลขนาดของ font ที่ถูกกำหนดเป็นค่า pixels ที่แตกต่างกันไป
a{font-size:10px;}
กำหนดขนาดของ font เป็น em
เพื่อลดปัญหาการแสดงผลของ browser ที่อ่านค่าและแสดงผลขนาดของ font ที่กำหนดเป็นค่า pixels แตกต่างกัน ดังนั้นนักพัฒนาเว็บไซต์จึงได้กำหนดขนาดของ font เป็นแบบ em ทดแทนแบบ pixels
1em เท่ากับค่าปกติของ font บน browser ซึ่งใน browser ค่า font ปกติคือ 16px(px คือ pixels) ดังนั้นค่าเริ่มต้นของ 1em จะเท่ากับ 16px (1em=16px)
ดังนั้นจึงสามารถคำนวณค่า pixels ออกมาเป็นค่า em ได้คือ pixels/16=em
