เรียน CSS พื้นฐานมักเน้น box model, positioning, font-family, font-size แต่ห้องลึกถึงรายละเอียดแบบอักษร ต้องดู font-kerning, letter-spacing, word-spacing — รายละเอียดเล็กๆ ที่ทำให้เว็บดูมืออาชีพ
Font Kerning (การปรับระยะคู่ตัวอักษร)
Font-kerning คือการกำหนดระยะห่างระหว่างตัวอักษร 2 ตัวที่ต่างกัน ฟอนต์ที่ kerning ดีมีระยะสม่ำเสมอ ดูสวยงามขึ้น CSS font-kerning มี 3 ค่า: none, normal, auto
<style> div { font-size: 2rem; font-family: serif; } #nokern { font-kerning: none; } #kern { font-kerning: normal; } </style> <div id="kern">AV Ta</div> <div id="nokern">AV Ta</div>
auto: เบราว์เซอร์ตัดสินใจ (บางเบราว์เซอร์ปิด kerning บนฟอนต์เล็กเพราะอ่านยาก)normal: ใช้ kerning ถ้าฟอนต์มีnone: ไม่ใช้ kerning
ลองรันโค้ด — จะเห็นความต่างชัดที่ 'AV' และ 'Ta' ระยะจากปลาย serif ตัวหนึ่งไปต้น serif ตัวถัดไป
Letter-Spacing (ระยะห่างตัวอักษร)
ต่างจาก kerning — letter-spacing คือระยะห่างสม่ำเสมอระหว่างทุกตัวอักษรในบรรทัด รับค่า length (px, rem, em) ค่าบวกหรือลบได้
#big-spacing { letter-spacing: 5px; } #little-spacing { letter-spacing: 1px; }
Word-Spacing (ระยะห่างคำ)
คือระยะห่างระหว่างคำ ค่าเริ่มต้น 0.25em รับค่า length บวก/ลบได้
#big-spacing { word-spacing: 5rem; } #little-spacing { word-spacing: 1rem; }
สรุป
บทความนี้อธิบายความต่าง: font-kerning (ระยะคู่ตัวอักษรเฉพาะ), letter-spacing (ระยะสม่ำเสมอทุกตัวอักษร), word-spacing (ระยะระหว่างคำ) รองรับเบราว์เซอร์กว้าง (font-kerning ไม่รองรับ IE)
