คุณสมบัติการยืดแบบอักษร CSS
ตัวอย่าง
ทำให้ข้อความใน <div> องค์ประกอบกว้างขึ้น:
div
{
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
font-stretch: expanded;
}
ความหมายและการใช้งาน
คุณสมบัติfont-stretch
ช่วยให้คุณทำให้ข้อความแคบลง (ย่อ) หรือกว้างขึ้น (ขยาย)
หมายเหตุ:แบบอักษรบางตัวมีใบหน้าเพิ่มเติม ใบหน้าที่กระชับและใบหน้าที่ขยาย สำหรับฟอนต์เหล่านี้ คุณสามารถใช้font-stretch
คุณสมบัติเพื่อเลือกฟอนต์แบบปกติ แบบย่อ หรือแบบขยายได้
หมายเหตุ:คุณสมบัตินี้ไม่มีผลหากแบบอักษรที่เลือกไม่มีใบหน้าที่ย่อหรือขยาย!
ค่าเริ่มต้น: | ปกติ |
---|---|
รับการถ่ายทอด: | ใช่ |
เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.fontStretch="ขยาย" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
font-stretch | 48.0 | 9.0 | 9.0 | 11.0 | 35.0 |
ไวยากรณ์
font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description |
---|---|
ultra-condensed | Makes the text as narrow as it gets |
extra-condensed | Makes the text narrower than condensed, but not as narrow as ultra-condensed |
condensed | Makes the text narrower than semi-condensed, but not as narrow as extra-condensed |
semi-condensed | Makes the text narrower than normal, but not as narrow as condensed |
normal | Default value. No font stretching |
semi-expanded | Makes the text wider than normal, but not as wide as expanded |
expanded | Makes the text wider than semi-expanded, but not as wide as extra-expanded |
extra-expanded | Makes the text wider than expanded, but not as wide as ultra-expanded |
ultra-expanded | Makes the text as wide as it gets |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |