CSS3 变换 - 旋转和字体消失答案

【问题标题】：CSS3 transform - rotate and font goes awayCSS3 变换 - 旋转和字体消失
【发布时间】：2013-04-04 23:46:54
【问题描述】：

我在一个 html 元素上使用了这个简单的 css3 转换规则（其中包含许多其他元素，如 h1、h2、inputs 和 img）：

    div{ 
  -moz-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 

 }

问题是字体被刻画了，你可以看到这怎么可能？

检查图像：

在使用旋转 css3 时，有什么方法/技巧可以将字体修复为不 skrech 或变得如此糟糕？

NB：为了避免像“它看起来不错”这样的 cmets：D 请仔细检查单词的字符是否垂直对齐，例如检查单词 Quale l 和 e 字符

在 Chrome 中我没有问题，只有 Firefox 似乎在旋转字体时出现问题:(

我可以看到，只有大号字体才可以，我的意思是， font-size:30px 和更多，如果我低于 30px，字体就不行了。

【问题讨论】：

我觉得不错。预期的输出是什么？
@LinusCaldwell 嗯，你必须深入了解 :D 深入检查 chars 在短语中垂直对齐不好 :( ，例如观看 l 和 e 在 Quale 字中
+1 如果您找到解决方案，请告诉我们。我也对这个话题很感兴趣。
@LinusCaldwell 确实真的希望找到可以修复的东西；)

标签： css fonts rotation transform

【解决方案1】：

我在两天前读到，不同的 Chrome 浏览器在使用和不使用 -webkit- 时可能会呈现不同的 CSS3 旋转。

更新：

我在 Chrome 中也有这个问题。渲染输出清晰且未对齐（如您的图片中所示）。所以我刚刚尝试应用（在 Chrome 中）-webkit-filter: opacity(0.999); 或-webkit-filter: blur(0px);，它的字体不是那么清晰，它的渲染和对齐都很好，但在这两种情况下都有点模糊。奇怪的。我认为这适用于任何过滤器。

如果是 Firefox，-moz-filter 不起作用，所以我发现这个解决方案与 Chrome 中的-webkit-filter 给出相同的结果：

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

values 中的数字是矩阵

这是旋转和使用过滤器后FF中的屏幕截图。

全屏：http://i.imgur.com/tUAd1B2.jpg

这里是LIVE EXAMPLE（适用于 Chrome 和 FF）

【讨论】：

我已经尝试了我更新的代码，Chrome 确实可以完美运行，FF 中仍然存在问题:(
嗯，我认为如果没有 transforms 上的供应商前缀，WebKit 浏览器将什么也做不了。
嘿伙计们，我更新了问题，你可以看到我把所有的 webkit 和 ms 以及 o 和 moz 前缀;）问题就在 moz 上，我可以看到 :(
@okok，在这种情况下没关系，但 Firefox 实际上使用没有供应商前缀的样式：caniuse.com/#feat=transforms2d
@okok，我非常希望有人能带来更好的解决方案。这个渲染问题让我抓狂。

【解决方案2】：

它可以根据您的互联网浏览器而改变。以我的经验，Firefox 处理旋转最好。 Chrome 会弄乱文本，IE 有很多错误。

您可以尝试使用 Javascript 进行旋转，但这比 CSS 转换要复杂一些。 https://code.google.com/p/jquery-rotate/

【讨论】：

如果我在 css 中找不到任何技巧，我一定会寻找 js 非常感谢
甚至不知道有这样的事情。但是，如果我理解正确的话：这使用了canvas。 <input/> 字段可以进入canvas 吗？
当然！我会尝试我想，首先我想了解是否可以避免 js ;)

【解决方案3】：

:-) 我明白了，你是对的。好吧，我想说，这只是一个渲染问题。我猜你可以从 3 个不同的浏览器中得到 4 个不同的输出（就像通常的转换一样）。 ;-)

有时可行的唯一解决方案是强制 3d 模式：

input{ transform:rotate(-3deg), translate3d(0, 0, 0); }

但也许它在这里什么都不做。

【讨论】：

是的，确实我试过 translate3d(0, 0, 0); 刚才，它没有修复 :( ，还是非常感谢
@okok，我对你有感觉。我讨厌浏览器如何以不同的方式呈现转换，尤其是在 3d 和硬件加速方面。一团糟！祝你好运！
是的，这很糟糕，因为我可能会留下错误，因为人们需要大约 5 分钟才能找到字体问题，但是该死的，我想修复它：P。谢谢你，伙计！
@okok，我在 Chrome 中也有这个问题。渲染的输出是脆的和未对齐的（就像你的图片一样）。所以我刚刚尝试应用（在 Chrome 中）-webkit-filter: opacity(0.999); 或-webkit-filter: blur(0px);，它的字体不是那么清晰，它的渲染和对齐很好，但在这两种情况下都有点模糊。奇怪的。附言我认为这适用于任何过滤器。
@MiljanPuzović 明白，这简直是地狱，我在 Chrome 上还可以，但在 FF 中不行:(

【解决方案4】：

您是否尝试过为输入创建父 div 并旋转它而不是旋转输入？

【讨论】：