CSS 转换（旋转）文本在 Chrome 和 Firefox (Windows) 中看起来没有消除锯齿答案

【问题标题】：CSS transformed (rotated) text looks not anti-aliased in Chrome and Firefox (Windows)CSS 转换（旋转）文本在 Chrome 和 Firefox (Windows) 中看起来没有消除锯齿
【发布时间】：2014-01-10 08:42:38
【问题描述】：

如果我对文本应用旋转，它不会在 Firefox 和 Chrome 中呈现抗锯齿（仅在 Windows 中），但它在 IE 中正确呈现。此外，它在 Mac OS X 的 Chrome 和 Firefox 中也能正确呈现。

以下是比较我的 Windows 8 中的三种浏览器的屏幕截图：

http://d.pr/i/9qeg（铬）

http://d.pr/i/r8i0 (火狐)

http://d.pr/i/crZ7 (IE10)

上面的 CSS 转换很简单

transform: rotate(-1.5deg) translateY(-2px);

这是一个小提琴：

http://jsfiddle.net/sa6Nb/2/

有什么想法吗？

【问题讨论】：

这可能对你有帮助stackoverflow.com/q/20721791/1926369
你的图片是死链接。
对不起，他们在我的 Droplr 中，但我删除了我的帐户。

标签： css google-chrome firefox html-rendering text-rendering

【解决方案1】：

Updated Fiddle

transform: translate3d(0, 0, 0);

您可以尝试使用translate3d。据我所知，它会触发元素渲染过程的硬件加速。您可以在小提琴中看到差异（至少在 chrome 中）

【讨论】：

这个截图来自哪个浏览器？使用 chrome 对我来说效果很好。我不确定是否有针对 Firefox 的解决方案。
此屏幕截图是使用 Google Chrome 版本 31.0.1650.63 m 拍摄的。我曾经在我的问题中截取屏幕截图。
您使用的是 Windows 吗？
Chrome 32 (beta) 和 Windows XP，我知道，它很旧 ;-) 也许你的硬件加速没有启用？
截至 2017 年 1 月，这在 Win7/Win8 上更新的 Firefox 上看起来不清晰。在 Win7 上的 Chrome 上很好。 IE11 使用了一种奇怪的后备字体，比 Firefox 还要糟糕。

【解决方案2】：

请在您的班级中添加此代码：

.your-class{
   text-shadow:0px 0px 1px #fff;
}

【讨论】：

文本阴影由于缺乏抗锯齿而无济于事，并且应用于大部分文本可能只会减慢渲染速度。