font-stretch คุณสมบัติ CSS ทำให้ข้อความของคุณแคบลง (ย่อ) หรือกว้างขึ้น (ขยาย)
แบบอักษรประเภทนี้เรียกอีกอย่างว่า ย่อ หรือ ขยาย แบบอักษร
- แบบอักษรย่อ มีอักขระที่มีความกว้างเส้นขีดแคบ นอกจากนี้ยังมีช่องว่างระหว่างอักขระที่แคบกว่ามาก (การเว้นวรรคระหว่างตัวอักษร/การนำหน้า) เมื่อเทียบกับแบบอักษรปกติ
- แบบอักษรที่ขยาย มีอักขระที่มีความกว้างเส้นขีดกว้างกว่าแบบอักษรปกติตามสัดส่วนความสูง
CSS font-stretch คุณสมบัติมีค่าดังต่อไปนี้ (รูปแบบหน้าแบบอักษร):
- เข้มข้นมาก
- เข้มข้นเป็นพิเศษ
- เข้มข้น
- กึ่งข้น
- ปกติ
- กึ่งขยาย
- ขยาย
- ขยายพิเศษ
- ขยายเป็นพิเศษ
ตัวอย่างโค้ด
h1 {
font-family: sans-serif;
font-stretch: expanded;
}
h2 {
font-family: sans-serif;
font-stretch: condensed;
}สำคัญ: แบบอักษร/ตระกูลแบบอักษรส่วนใหญ่ไม่ได้มาพร้อมกับแบบอักษรย่อหรือขยายเหล่านี้
ดังนั้นก่อนที่คุณจะใช้ font-stretch คุณสมบัติในสไตล์ชีต CSS ของคุณ ตรวจสอบให้แน่ใจว่าตระกูลฟอนต์ที่คุณใช้มีฟอนต์แบบย่อหรือแบบขยายที่คุณต้องการใช้
หมายเหตุ:หากคุณใช้ font-stretch คุณสมบัติแม้ว่ากลุ่มแบบอักษรที่คุณเลือกไม่ได้ให้แบบอักษรที่ย่อหรือขยายแล้วจะไม่มีอะไรเกิดขึ้น คุณจะไม่ได้รับฟอนต์มารยาท (ที่สร้างโดยคอมพิวเตอร์) ที่น่าเกลียด ซึ่งแตกต่างจากฟอนต์ตัวหนาหรือตัวเอียงมารยาท
อย่างไรก็ตาม เทคโนโลยีเบราว์เซอร์มักเปลี่ยนแปลงไป ทำไมต้องเสี่ยง?
