如何css控制字体按百分比放大缩小

html-css025

如何css控制字体按百分比放大缩小,第1张

由于字体是“有级缩放”（就像风扇的档位调节开关，只能调1档、2档、3档这些，不能1.5档，或者2.1111档等），不是“无级缩放”（就像音响上的音量旋钮，可以调到任意的位置），因此要想真正实现按百分比来缩放是不太现实的。一个变通的方法是利用css3的新长度单位rem（根元素的字体大小），其默认值是16px，那么1.5rem就是16*1.5=24px，0.75rem就是16*0.75=12px。比如font-size:1.5rem

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

<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里对这种中间有横杠的都需要把横杠去掉并把第二个单词的首字母大写