.hoverMenu{ -webkit-transition:all 0.1s; -moz-transition:all 0.1s; -o-transition:all 0.1s; transition:all 0.1s; } .hoverMenu:hover{ -webkit-transform: scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2); }鼠标移动到这个p上面的时候，字体会变细变宽，最后正常 ？ 如何防止这种问题 ？
scale（） 这个属性会影响字体 ？ 如何不让字体受到影响
这种方式确实还是有问题,通过绝对定位还是可以实现但是麻烦,所以还是通过jquery最好了.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你把transition里面的all改成具体要变化的属性 all的意思是改变所有
font-stretch:normal;
去掉就行了。。
字体变大不关all的事情，transition:all 0.1s;这只是过度时间
.hoverMenu:hover .font{transform:scale(1);}，
.font是你不想变大的文字的一个类，把它的放大倍数为1（不变）试下
前几天看到百度网页,是把字体先放大在缩回原来的大小.效果还挺理想
你要做缩放的动画是吧？别用scale呗？用translate3D(0,0,0) -> translate3D(0,0,50000)这样的动画更平滑；需要配合perspective属性；
PS：因为文字需要浏览器依据系统的font antialias（字体平滑或者win里面的那个TrueType），为了节省性能损耗，需要在动画的时候暂时禁用字体平滑，动画结束后再弃用字体平滑；这就是你看到字体细一下，转角都很锐了，然后动画完成后字体有变回平滑了；为了防止这种恶心的情况，一般这种都会配合opacity的动画，吧文字做成淡入的动画。。。算是个障眼法吧；