ใช้คุณสมบัติ letter-spacing เพื่อกำหนดระยะห่างระหว่างตัวอักษร (character spacing)
ค่าที่ใช้ได้
letter-spacing: normal | length | initial | inherit;
normal- ระยะห่างปกติของฟอนต์ (ค่าเริ่มต้น)length- ระยะห่างที่กำหนดเอง (px, em, rem, cm, ฯลฯ) ใช้ค่าลบได้initial- คืนค่าเริ่มต้นinherit- สืบทอดจาก parent
ตัวอย่างที่ 1: ระยะห่างบวก
<!DOCTYPE html> <html> <head> <style> p.demo1 { letter-spacing: 1px; } p.demo2 { letter-spacing: 10px; } </style> </head> <body> <h1>Demo Heading</h1> <h2>Heading2</h2> <p class="demo1">This is demo text.</p> <h2>Heading2</h2> <p class="demo2">This is demo text.</p> </body> </html>
ตัวอย่างที่ 2: ระยะห่างกว้างและลบ
<!DOCTYPE html> <html> <head> <style> p.demo1 { letter-spacing: 1cm; } p.demo2 { letter-spacing: -2px; } </style> </head> <body> <h1>Demo Heading</h1> <h2>Heading2</h2> <p class="demo1">This is demo text.</p> <h2>Heading2</h2> <p class="demo2">This is demo text.</p> </body> </html>
คำอธิบายและเคล็ดลับ
- ค่าบวก - ขยายระยะห่าง ใช้สำหรับหัวข้อ/โลโก้ให้ดูทันสมัย
- ค่าลบ - บีบตัวอักษรเข้าใกล้กัน ใช้ระวัง เพราะอาจอ่านยาก
- หน่วย em/rem - ปรับตามขนาดฟอนต์ เหมาะสำหรับ responsive design
- ผลต่อการอ่าน - ค่ามากเกินไป (เช่น > 0.25em) อาจลด readability
คุณสมบัติที่เกี่ยวข้อง:
word-spacing- ระยะห่างระหว่างคำword-break,overflow-wrap- จัดการตัวอักษรยาวfont-kerning- ควบคุม kerning ของฟอนต์ (auto, normal, none)
