css - 使用旋转 webkit 时出现锯齿状文本问题

Question

关于如何使文本显示为“内联”的任何想法？

我在我的投资组合上制作了宝丽来照片效果，旋转完全破坏了字体，不确定是否有修复。

请放心，我目前的字体还不错，但其他字体看起来很糟糕。

代码：

figure.polaroid {
width: 221px;
height: 240px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
background-color: white;
padding: 10px;
box-shadow: 1px 2px 10px black;
margin-top: 25px;
border-radius: 5px;
}

Answer 1

让我猜猜，铬？

尝试-webkit-backface-visibility: hidden;

我读到有些人通过对旋转应用 3d 变换来避免这个问题，例如transform: rotate3d(1, 2.0, 3.0, 10deg)，所以这可能是一个更清洁的解决方案。

Answer 2

您应该尝试应用text-shadow以使字体平滑。

在这里您可以尝试不同的阴影，选择一个微妙的阴影并检查它在旋转时的外观： http ://www.elfboy.com/text-shadow/