为什么这些字体在旋转时变得模糊？

Question

我在typeplate的帮助下创建了这个个人小网站。

该网站非常简单，看起来像这样： 该网站的链接为here

3个方格不断旋转。

我有几个问题，不同的是浏览器：

1. 在Chrome / Internet Explorer中 - 字体在旋转时变得模糊
2. 在Firefox中 - 线条在旋转时变得锯齿状和丑陋

这是由于抗锯齿吗？不知道如何解决这个问题。特别是字体问题对我来说很烦人。

提前致谢！

Answer 1

您可以尝试使用transform：perspective属性来解决这些问题。

#rotated-element {
  -webkit-transform: perspective(1px) rotate(-10deg);
  -moz-transform: perspective(1px) rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: perspective(1px) rotate(-10deg);
}

您的文字应该更好。注意不要将属性添加到IE和Opera，因为它可能会破坏事物。

此处有更多信息和技巧： http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/