css中关于旋转属性transform: rotate影响文字轻微变形的解决办法。
在最近搭建自己的网站时遇到了一个问题,如下面图片所:
如上所示,左边的是已有的较为完美的效果,右边的是新建页面时出现的实际效果。
代码是复制粘贴过去的,css样式表用的是同一个。
在笔者查看浏览器控制台两个源码和样式后发现是完全一致(在chorme中出现,但是在火狐浏览器中并未发生字体变形的情况,即右边的样式在火狐中是正常显示)。
在经过一段时间的修改发现,要想实现左边饱满的显示效果,就必须是在body的height大于当前屏幕高度时。
这一点很费解,我在查询了关于trtransform属性的一些信息时,却并未发现文字轻微变形锐利的情况发生。
下面是贴上旋转前和旋转后的css样式和实际效果(当前body的height并未指定数值):
旋转后:
#fl {
/*设置左边的导航栏样式*/
position: fixed;