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

【问题标题】：Why do these fonts get blurry on rotation?为什么这些字体在旋转时会变得模糊？
【发布时间】：2014-06-18 19:54:52
【问题描述】：

我在typeplate 的帮助下编写了这个个人小网站。

该网站非常简单，如下所示： 该网站的链接是here

3 个正方形不断地轻微旋转。

我有几个问题，因浏览器而异：

在 Chrome/Internet Explorer 中 - 字体在旋转时变得模糊
在 Firefox 中 - 线条在旋转时变得锯齿状且难看

这是因为抗锯齿吗？不知道如何解决这个问题。尤其是字体问题让我很烦。

提前致谢！

【问题讨论】：

是的，这是由于自定义字体的抗锯齿。不，很遗憾，您无法通过 CSS 解决此问题。
也许使用新的will-change css 属性？

标签： html css css-transitions antialiasing

【解决方案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，因为它可能会破坏。

【讨论】：