font-stretch 屬性/樣式/取值/語(yǔ)法/格式寫(xiě)法/簡(jiǎn)寫(xiě)/用法[CSS教程手冊(cè)]

語(yǔ)法：

默認(rèn)值：normal

適用于：所有元素

繼承性：有

動(dòng)畫(huà)性：是

計(jì)算值：指定值

取值：

normal：: 正常文字寬度
ultra-condensed：: 比正常文字寬度窄4個(gè)基數(shù)。
extra-condensed：: 比正常文字寬度窄3個(gè)基數(shù)。
condensed：: 比正常文字寬度窄2個(gè)基數(shù)。
semi-condensed：: 比正常文字寬度窄1個(gè)基數(shù)。
semi-expanded：: 比正常文字寬度寬1個(gè)基數(shù)。
expanded：: 比正常文字寬度寬2個(gè)基數(shù)。
extra-expanded：: 比正常文字寬度寬3個(gè)基數(shù)。
ultra-expanded：: 比正常文字寬度寬4個(gè)基數(shù)。

說(shuō)明：

設(shè)置或檢索對(duì)象中的文字是否橫向拉伸變形。

文字的拉伸是相對(duì)于瀏覽器顯示的字體的正常寬度。
對(duì)應(yīng)的腳本特性為fontStretch。

兼容性：

淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0-8.0	2.0-8.0	4.0-43.0	3.1-8.1	15.0-28.0	3.2-8.1	2.1-4.4.4	18.0-40.0
Basic Support	9.0+ ^#1	9.0+ ^#1	4.0-43.0	3.1-8.1	15.0-28.0	3.2-8.1	2.1-4.4.4	18.0-40.0

已支持font-stretch，但顯示效果與正常文字并無(wú)不同。

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>font-stretch_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列【CSS在線手冊(cè)-網(wǎng)站設(shè)計(jì)教程參考資料】</title>
<meta name="author" content="易網(wǎng),網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)站建設(shè),www.dgyx668.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 id="yk1nrox" class="normal">
		normal
		a
	</li>
	<li id="supkfv2" class="condensed">
		condensed
		a
	</li>
	<li id="9t641er" class="ultra-condensed">
		ultra-condensed
		a
	</li>
	<li id="vchrhbd" class="extra-condensed">
		extra-condensed
		a
	</li>
	<li id="0zm1kqn" class="semi-expanded">
		semi-expanded
		a
	</li>
	<li id="y6c4z7t" class="expanded">
		expanded
		a
	</li>
	<li id="jymjfcq" class="ultra-expanded">
		ultra-expanded
		a
	</li>
	<li id="9kfv7pl" class="extra-expanded">
		extra-expanded
		a
	</li>
	<li id="c4z3vxs" class="semi-condensed">
		semi-condensed
		a
	</li>
</ul>
</body>
</html>