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> ```