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

Question

所以我已经阅读了很多关于旋转文本的当前状态并且无法在所有浏览器中完美地实现真正的抗锯齿的内容。它看起来像 chrome 中图片中的第一个框，但在 firefox 中看起来像第二个锯齿状框。我尝试了最流行的修复程序，包括 -webkit-backface-visibility:hidden; -webkit-字体平滑:抗锯齿；也许还有一个我不记得了。

然而，这不是在问同一个问题，而是一个我在任何地方都找不到的新问题。同框的这两张截图均来自Firefox。底部的锯齿状框是它通常看起来的样子，但是，当我使用 css 编辑控制台将页面上的另一个(完全不同的)元素与旋转属性混淆时，它会完美/平滑地呈现框......

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

编辑:评论部分的图片

Answer 1

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

修复:

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

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

解释:

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

注意事项:

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

dev.opera.com hosts a good discussion合成、使用 transform3d 和 CSS3 will-change 属性的技巧。