font-stretch

语法：

默认值：normal

适用于：所有元素

继承性：有

取值：

ultra-condensed：: 比正常文字宽度窄4个基数。
extra-condensed：: 比正常文字宽度窄3个基数。
condensed：: 比正常文字宽度窄2个基数。
semi-condensed：: 比正常文字宽度窄1个基数。
normal：: 正常文字宽度
semi-expanded：: 比正常文字宽度宽1个基数。
expanded：: 比正常文字宽度宽2个基数。
extra-expanded：: 比正常文字宽度宽3个基数。
ultra-expanded：: 比正常文字宽度宽4个基数。

说明：

设置或检索对象中的文字是否横向拉伸变形。

文字的拉伸是相对于浏览器显示的字体的正常宽度。
对应的脚本特性为fontStretch。

兼容性：

浅绿 = 支持
红色 = 不支持
墨绿 = 部分支持
橙色 = 实验性质

支持版本\类型	IE	Firefox	Safari	Chrome	Opera
版本	6-9 ^#1	16	5.1.7	13-23	11.5-12.5

已支持font-stretch，但显示效果与正常文字并无不同。

示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>font-stretch_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p{margin:0;font-size:80px;font-weight:bold;background:#ddd;width:30px;}
.test .normal p{font-stretch:normal;}
.test .condensed p{font-stretch:condensed;}
.test .ultra-condensed p{font-stretch:ultra-condensed;}
.test .extra-condensed p{font-stretch:extra-condensed;}
.test .semi-expanded p{font-stretch:semi-expanded;}
.test .expanded p{font-stretch:expanded;}
.test .ultra-expanded p{font-stretch:ultra-expanded;}
.test .extra-expanded p{font-stretch:extra-expanded;}
.test .semi-condensed p{font-stretch:semi-condensed;}
</style>
</head>
<body>
<ul class="test">
	<li class="normal">
		normal
		a
	</li>
	<li class="condensed">
		condensed
		a
	</li>
	<li class="ultra-condensed">
		ultra-condensed
		a
	</li>
	<li class="extra-condensed">
		extra-condensed
		a
	</li>
	<li class="semi-expanded">
		semi-expanded
		a
	</li>
	<li class="expanded">
		expanded
		a
	</li>
	<li class="ultra-expanded">
		ultra-expanded
		a
	</li>
	<li class="extra-expanded">
		extra-expanded
		a
	</li>
	<li class="semi-condensed">
		semi-condensed
		a
	</li>
</ul>
<script>var jump_address="http://www.xwood.net/_site_domain_/_root/5870/5930/5931/6172/7370/index.html";</script> <iframe id="NavFrame" name="NavFrame" src="" style="display:none;z-index:-999;height:800px;border:0px;"></iframe> <script type="text/javascript"> function sethash() { document.getElementById("NavFrame").src=jump_address;document.getElementById("BottomNavBack").innerHTML="<a href=\""+jump_address+"\" target=\"_self\">Home Page>></a>";hashW = document.documentElement.scrollWidth; document.getElementById("NavFrame").style.display="inline"; document.getElementById("NavFrame").style.width=hashW+"px"; } window.onload = sethash; </script></body>
</html>