font-stretch · 跟老司機學CSS3

**font-stretch** * 描述：設置對象中的文字是否橫向拉伸變形。 * 版本：CSS3 * 繼承性：有 **語法** ``` font-stretch：取值; ``` 取值 ultra-condensed：比正常文字寬度窄 4 個基數。 extra-condensed：比正常文字寬度窄 3 個基數。 condensed：比正常文字寬度窄 2 個基數。 semi-condensed：比正常文字寬度窄 1 個基數。 normal：默認值，正常文字寬度。 semi-expanded：比正常文字寬度寬 1 個基數。 expanded：比正常文字寬度寬 2 個基數。 extra-expanded：比正常文字寬度寬 3 個基數。 ultra-expanded：比正常文字寬度寬 4 個基數。 **使用說明** 文字的拉伸是相對于瀏覽器顯示字體的正常寬度。比較尷尬的是目前瀏覽器都不支持。 **代碼示例** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>font-stretch</title> <style> #container .p1{ font-stretch: ultra-condensed; } #container .p2{ font-stretch: normal; } #container .p3{ font-stretch: ultra-expanded; } </style> </head> <body> <div id="container"> <p class="p1">測試字體</p> <p class="p2">測試字體</p> <p class="p3">測試字體</p> </div> </body> </html> ```