CSS 文本转换问题答案

【问题标题】：CSS text transform problemsCSS 文本转换问题
【发布时间】：2013-10-03 13:28:12
【问题描述】：

这个问题在这里被问了很多次，但我还没有找到一个很好的解决方案。有人建议添加 backface-visibility: hidden 并带有所有前缀的偏角，但对我来说并没有解决问题，也没有建议使用 font-smoothing: antialiased 他欺骗了。我在问是否有人最近想出了如何以一种漂亮的方式呈现 CSS 旋转文本，而文本似乎没有被破坏。

http://jsfiddle.net/pBtEW/10/

<div>
    <p class="rotated">this text is rotated</p>
    <p class="notrotated">this text is not rotated</p>
</div>
<input type="submit" id="submit1" class="rotated"/><br/>
<input type="submit" id="submit2" class="notrotated"/>

.rotated {
    transform:rotate(-4deg);
    -moz-transform:rotate(-4deg);
    -webkit-transform:rotate(-4deg);
    -o-transform:rotate(-4deg);
    -ms-transform:rotate(-4deg);
}

非常感谢您的帮助。

【问题讨论】：

我相信这取决于浏览器（也可能是硬件）的怜悯......对我来说，Opera Presto 似乎比 Chrome/Firefox 处理得更好（在我正在使用的这台低端机器上）。另外，我认为最好将不带前缀的版本放在最后，而不是放在开头。
感谢您的回答。我试图把非前缀版本放在最后，但结果是一样的：-/ FYI 机器正在运行 x64Win7、i7、4GB RAM、ATIm HD5800
把无前缀版本放在最后是因为CSS规则是从上到下解析的，所以对于同时支持无前缀和有前缀版本的浏览器，把无前缀版本放在最后将保证使用the latest rendering method (i.e. not "backward-compatible method", if that exist)。对于您的问题，我想说 Chrome 和 Firefox 的渲染效果比您在我的旧 XP 计算机上的屏幕截图要糟糕得多……

标签： css rotation transform text-rendering rendering-engine

【解决方案1】：

在我的网站上使用 315 度旋转文本，我使用了 font-family:courier 和 line-height:100% 和 font-style:normal 作为我的目的可接受的跨浏览器解决方案。第二个最佳解决方案（文本在 IE 和 Mozilla 上完美呈现，但在 Chrome 中不完美）是不设置字体系列。

【讨论】：