Html 转换在Firefox中创建波浪形文本

伙计们，我有一个div上的文本，它有transform:rotate（3deg）。在Firefox中，文本呈现波浪状。移除对div的变换将修复波纹。有没有办法让我既吃蛋糕又吃蛋糕

HTML:

编辑：

附加信息：我必须为这个项目使用@字体

屏幕截图：

尝试添加透视图

.turn-right {
    -webkit-transform: perspective(9999px) rotate(3deg);
            transform: perspective(9999px) rotate(3deg);
}

在现代浏览器中不需要-moz转换

顺便说一下，webkit浏览器中也存在同样的错误

为什么这样做有效

我没有真正的答案，因为我没有浏览器的源代码。但我的猜测如下。浏览器有一个非常好的渲染引擎，可以做很多事情，而且做得非常好。但在大多数情况下，这一切都是昂贵的（阅读：会使浏览器速度变慢。所以，大多数时候它都在猜测：这真的有必要吗？我真的需要在ZZZ中计算yyyy的xxxx来显示它吗

有些错误来自于猜测不正确，忽略了必要的演算

然后，解决方案是在那里放置一些东西，使浏览器渲染引擎认为“等等，我真的需要计算它，这不是简单的情况”

---

这行中还有一些修复，如translate3d（0,0,0）或translateZ（0）或backface visibility hidden。把东西翻译成0px有什么意义？它们迫使浏览器以复杂的方式而不是简单的方式来做一些事情，并解决-优化结果

另请看@MattGibson看到的，尝试过的，并不能解决我的问题。我认为你的问题还不能解决，不幸的是，至少不能在Firefox中解决。看起来字体呈现有一些突出的错误。显示了相同的问题，在2009年提出的中引用…这不是一个bug，而是一个特性！这似乎使问题变得更好。也许只是我的眼睛，但我觉得还是有一点波纹，但它非常清晰，几乎完美。谢谢。是的，还有一点波浪。我所知道的使它看起来更好的唯一方法是增加角度。旋转（6度）看起来比旋转（3度）好。客户对它很满意，所以我对它也很满意。出于好奇，为什么会这样？对我来说，这似乎不是一个显而易见的解决方案。添加了一些解释。。很高兴它帮助了你！

.card {
    display: block;
    width: 550px;
    height: 375px;
}
.turn-right {
    -webkit-transform: rotate(3deg);
       -moz-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
         -o-transform: rotate(3deg);
            transform: rotate(3deg);
}

.turn-right {
    -webkit-transform: perspective(9999px) rotate(3deg);
            transform: perspective(9999px) rotate(3deg);
}