css中font-stretch属性功能简介


摘要:
下文讲述css属性中font-stretch的功能说明,如下所示:


css font-stretch属性功能

css font-stretch属性的功能:
设置选中html标签中的文字是否横向拉伸
(注意文字拉伸相对于浏览器字体的正常宽度)

css font-stretch属性设置语法:
  font-stretch:ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded
  ---------------参数说明---------------
   normal:
     默认值,正常文字宽度,不进行拉伸操作
   ultra-condensed:
    比正常文字宽度窄4个基数
   extra-condensed:
    比正常文字宽度窄3个基数
   condensed:
    比正常文字宽度窄2个基数
   semi-condensed:
    比正常文字宽度窄1个基数
   semi-expanded:
     比正常文字宽度宽1个基数
   expanded:
     比正常文字宽度宽2个基数
   extra-expanded:
     比正常文字宽度宽3个基数
   ultra-expanded:  
     比正常文字宽度宽4个基数   


css font-stretch属性示例说明

 
 
<meta charset="utf-8" /> 
<style>
 li>p{margin:0;font-size:80px;font-weight:bold;background:#ddd;width:30px;}
.divTest .normal p{font-stretch:normal;}
.divTest .condensed p{font-stretch:condensed;}
.divTest .ultra-condensed p{font-stretch:ultra-condensed;}
.divTest .extra-condensed p{font-stretch:extra-condensed;}
.divTest .semi-expanded p{font-stretch:semi-expanded;}
.divTest .expanded p{font-stretch:expanded;}
.divTest .ultra-expanded p{font-stretch:ultra-expanded;}
.divTest .extra-expanded p{font-stretch:extra-expanded;}
.divTest .semi-condensed p{font-stretch:semi-condensed;}
</style>
<p>
 maomao365.com <br />
 css font-stretch属性示例说明
</p>
<hr />

<ul class="divTest">
	<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>		
css之font-stretch属性示例说明

css之font-stretch属性示例说明