如何解决应用变换后的模糊字体
我试图通过将 rotateY
应用于包含文本和图像的 div 来实现类似于门/文件夹打开的动画。应用后,文本元素变得模糊:
blurry_chrome
所有应用于 div 的内容是:
.folder:hover {
transform: translateZ(0) scale(1.12);
}
.folder:hover .front-cover {
transform: perspective(1000px) rotateY(-20.44deg);
}
即使去掉其中一个,问题仍然存在。仅应用 scale
或 rotateY
时,文本仍然模糊。
在 Firefox 上,问题似乎实际上要糟糕得多:
blurry_firefox
我尝试了很多技巧,例如 translateZ(0)
、blur(0)
和 font-smoothing
,但没有任何改变。
代码笔:https://codepen.io/mello-code/pen/XWpzxWd
编辑: 我已经尝试过的一些“解决方案”:
- -webkit-font-smoothing:子像素抗锯齿;
- 过滤器:blur(0);
- 转换起源:51% 51%;
- 使 div 大小、元素、内边距和边距均匀
- 背面可见性:隐藏;
- perspective(1px)(悬停时已经应用了透视)
- 缩放而不是缩放
他们似乎都没有帮助。有什么想法吗?
解决方法
scale
是这里最大的罪魁祸首。放大超过 1 会导致模糊,因此我没有在悬停时放大,而是将元素缩小并在悬停时放大到 1。
此外,从转换中移除 perspective
会产生清晰的文本和图像。
有:
-webkit-font-smoothing: subpixel-antialiased
应该给你最清晰的结果,但它不是标准化的。
在此处查看有关字体平滑的更多信息:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
这个答案可能也有帮助:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。