CSS 旋转后 Firefox 中的抗锯齿文本

所以我读了很多关于旋转文本的当前状态的文章，并且无法在所有浏览器中完美地实现真正的抗锯齿功能。它在 Chrome 中看起来像图片中的第一个框，但在 Firefox 中看起来像第二个锯齿状框。我尝试过最流行的修复程序，包括 -webkit-backface-visibility:hidden; -webkit-font-smoothing：抗锯齿；也许还有一个我不记得了。

然而，这不是问同样的问题，而是我在任何地方都没有找到的一个新问题。这两张同一个框的屏幕截图均来自 Firefox。底部的锯齿状框是正常情况下的样子，但是，当我使用 css 编辑控制台将旋转属性与页面上的另一个（完全不同的）元素搞乱时，它会完美/平滑地呈现框......

然而，我确实必须继续向上或向下按以更改另一个元素上的旋转值，以使整个框完美地呈现抗锯齿效果，然后它返回到锯齿状的正常状态。我旋转了内容所在的 div，并将 css 修复放在同一个 div 上（尽管我确实尝试将 css 修复放在每个元素上），但我似乎没有像您在框中看到的那样获得任何平滑度或抗锯齿效果上面...仅当我在浏览器中旋转页面上的另一个元素时。搞什么？！？！？有没有办法在 css 中做到这一点，或者这只是浏览器实时执行的操作，而无法在 CSS 中重现这种平滑度？

EDIT: PIC for comments section

无论出于何种原因，在某些情况下，浏览器在进行复杂转换时似乎会“忘记”抗锯齿文本。

The fix:

使用 CSS 强制浏览器在单独合成的“层”中渲染转换后的元素是一种解决方案：

transform: rotate(…) translate3d(0px,0px,1px);

说明：

许多渲染引擎实现为 3D 转换元素创建 GPU 层，并在绘制时将其合成到页面的其余部分。这种替代渲染路径可以强制采用不同的文本渲染策略，从而获得更好的抗锯齿效果。

警告：

然而，这有点像黑客：首先，我们要求进行我们并不真正想要的 3 维变换；其次，强制使用许多不必要的 GPU 层可能会降低性能，尤其是在 RAM 有限的移动平台上。

dev.opera.com 举办了一场精彩的讨论合成，黑客使用transform3d，和 CSS3will-change财产。