网页里html,css代码怎么做出字体拉伸的效果?如下图。菜鸟一个,请不吝赐教。

html-css013

网页里html,css代码怎么做出字体拉伸的效果?如下图。菜鸟一个,请不吝赐教。,第1张

<SPAN style="FONT-SIZE: 31ptmso-font-width: 200%">测试文字</SPAN>

mso-font-width的值就是原来字体宽度的百分之多少

css2中有font-stretch这个属性设置字体宽度,对字体进行伸缩变形。

其属性值有:normal(默认值。把缩放比例设置为标准);

wider(把伸展比例设置为更进一步的伸展值);

narrower(把收缩比例设置为更进一步的收缩值);

ultra-condensedextra-condensedcondensedsemi-condensedsemi-expandedexpandedextra-expandedultra-expanded等

但目前主流浏览器都不支持这一属性。但也可以用JSP解决,

“object.style.fontStretch="ultra-expanded"

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:span {font-size: 0.8em}。

3、浏览器运行index.html页面,此时span的字体大小被设置h1字体大小的80%。