如何利用CSS对页面中的文字尺寸进行无限放大或缩小控制

html-css012

如何利用CSS对页面中的文字尺寸进行无限放大或缩小控制,第1张

最简单的 就是给你看下原理 你可以自己修改

<span style="font-size:16px" onclick="this.style.fontSize=(parseInt(this.style.fontSize.replace('px',''))+2)+'px'">单击放大文字</span>

顺便说明parseInt是把字符串变数字 replace是把取得的css属性里的px去掉 原css里字体大小使用font-size控制 在js里对这种中间有横杠的都需要把横杠去掉并把第二个单词的首字母大写

<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"