font-stretch CSS property ทำให้ข้อความแคบลง (condensed) หรือกว้างขึ้น (expanded)
เรียกว่า condensed หรือ expanded fonts
- Condensed fonts ตัวอักษร stroke-width แคบ letter-spacing/leading แคบกว่าปกติ
- Expanded fonts ตัวอักษร stroke-width กว้างกว่าปกติสัดส่วนกับความสูง
font-stretch property values:
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- normal
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
ตัวอย่างโค้ด
h1 { font-family: sans-serif; font-stretch: expanded; } h2 { font-family: sans-serif; font-stretch: condensed; }สำคัญ: typeface/font family ส่วนใหญ่ไม่มาพร้อม condensed/expanded font faces
ก่อนใช้ font-stretch ต้องเช็คว่า font family ที่ใช้มี condensed/expanded font face ที่ต้องการหรือไม่
หมายเหตุ: ถ้าใช้ font-stretch แตะ font-family ไม่มี faces นั้น ไม่เกิดอะไรขึ้น ไม่ได้ ugly faux font เหมือน faux bold/italics
แต่ browser technologies เปลี่ยนแปลงบ่อย ไม่ควรเสี่ยง
