在父元素上使用转换时的 Chrome 文本渲染

Posted 2023-05-08

【中文标题】在父元素上使用转换时的 Chrome 文本渲染

【英文标题】：Chrome text rendering when using transforms on parent element

【发布时间】：2014-01-10 09:19:02

【问题描述】：

我对 div 元素进行了非常简单的转换。里面是几行文字。文本在 Firefox 和 IE 上呈现良好，但在 Chrome 中看起来不太好。我尝试更改 -webkit-font-smoothing，但这也没有帮助。

.text-holderposition: absolute;top: 0;width: 30rem;height: 20rem;margin-right:   auto;margin-left: auto;left: 0;right: 0;-webkit-transform:rotate(-4.6deg);-moz-   transform:rotate(-4.6deg); transform: rotate(-4.6deg);

这是小提琴： http://jsfiddle.net/FFA6b/

【问题讨论】：

这里有一个很好的答案：***.com/questions/17867574/…

【参考方案1】：

很难解释原因，但添加视角可以解决问题：

-webkit-transform: perspective(999px) rotate(-4.6deg);

fiddle