©
本文档使用
php中文网手册 发布
font-stretch：normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
默认值：normal
适用于：所有元素
继承性：有
动画性：是
计算值：指定值
normal：正常文字宽度
ultra-condensed：比正常文字宽度窄4个基数。
extra-condensed：比正常文字宽度窄3个基数。
condensed：比正常文字宽度窄2个基数。
semi-condensed：比正常文字宽度窄1个基数。
semi-expanded：比正常文字宽度宽1个基数。
expanded：比正常文字宽度宽2个基数。
extra-expanded：比正常文字宽度宽3个基数。
ultra-expanded：比正常文字宽度宽4个基数。
文字的拉伸是相对于浏览器显示的字体的正常宽度。
对应的脚本特性为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 |
| 9.0+ #1 | 9.0+ #1 |
已支持font-stretch，但显示效果与正常文字并无不同。
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<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">
<strong>normal</strong>
<p>a</p>
</li>
<li class="condensed">
<strong>condensed</strong>
<p>a</p>
</li>
<li class="ultra-condensed">
<strong>ultra-condensed</strong>
<p>a</p>
</li>
<li class="extra-condensed">
<strong>extra-condensed</strong>
<p>a</p>
</li>
<li class="semi-expanded">
<strong>semi-expanded</strong>
<p>a</p>
</li>
<li class="expanded">
<strong>expanded</strong>
<p>a</p>
</li>
<li class="ultra-expanded">
<strong>ultra-expanded</strong>
<p>a</p>
</li>
<li class="extra-expanded">
<strong>extra-expanded</strong>
<p>a</p>
</li>
<li class="semi-condensed">
<strong>semi-condensed</strong>
<p>a</p>
</li>
</ul>
</body>
</html>
点击 "运行实例" 按钮查看在线实例