修复CSS3旋转后文本的清晰/锯齿状呈现

我肯定你们会注意到CSS3旋转后文本令人讨厌的外观。文本看起来很脆，锯齿状，不对齐

我找到了一些答案，其中包括

-webkit字体平滑

，但根本没有效果

之后，我找到了自己的解决方案：只需应用一些

过滤器
属性！是的，这很有效！它适用于任何过滤器（不透明度、灰度、模糊）

因此，如果我们旋转一些文本，并应用（对于Chrome）

及(适用于FF)

filter:url（“数据：image/svg+xml；utf8，#灰度”）；

结果好多了。文本对齐很好，没有酥脆和锯齿状的效果。但是现在文本有点模糊了。并不是因为过滤器
模糊
，其他过滤器的结果是相同的。同样，
-webkit字体平滑
没有效果

，您可以看到这两段之间的差异。
（如果你申请，你甚至可以更好地看到不同之处。）


现在，我的问题是-是否有更好的方法来解决文本旋转后的渲染问题，使用其他一些属性？或者至少在使用过滤器后如何修复这种模糊效果

提前谢谢
 我想这方面没什么可做的

计算机字体被开发成以水平和垂直对齐的二次像素为网格显示——并且将字符旋转90°（或者可能45°）以外的任何倍数都很难产生令人满意的结果（至少在正常网站上显示的小尺寸字体不是这样）因为仍然只有二次像素可用于渲染它们，因此必须进行大量的舍入和插值，因此，多个像素现在必须以某种方式显示之前仅为一个小“点”的部分，即使是亚像素渲染也无法解决这一问题（有时甚至会增加旋转文本的“模糊度”）


⑨尝试将小提琴中的字体大小改为5em–您会注意到旋转后的文本看起来非常好。对于小文本大小，这是不可能的，至少在今天的屏幕像素密度下是不可能的（在视网膜显示器上可能比在普通TFT上看起来好一点）.
是的，我忘了提到，将字符旋转90°以外的任何角度都很难产生令人满意的结果。因此，没有比使用过滤器更好的“修复”方法（对于小字体/正常字体大小），就像在我的小提琴中一样？模糊的结果不是完美的，但要比清晰的外观好得多。（IMHO）可以使用transform:rotate（45度）translate3d（0，0，0）；获得相同的结果。
-webkit-filter: blur(0px); 

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");