修复 CSS3 旋转后文本的脆/锯齿状渲染

Question

我确定您会注意到 CSS3 旋转后文本的恼人外观。文字看起来很脆，锯齿状，不对齐......

我找到了一些答案，其中包括 -webkit-font-smoothing，但这根本没有效果。

在那之后，我找到了自己的解决方案：只需应用一些 filter 属性！是的，这行得通！它适用于任何滤镜（不透明度、灰度、模糊）！

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

-webkit-filter: blur(0px); 

和（对于 FF）

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

结果要好得多。文字对齐很好，没有松脆和锯齿状的效果。但是......现在文字有点模糊。不是因为过滤器blur，与任何其他过滤器的结果相同。同样，-webkit-font-smoothing 没有效果。

Here is jsfiddle ，您可以看到这两段之间的区别。 （如果您申请color: red; on p，您甚至可以更好地看到差异。）

---

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

提前致谢！

Answer 1

我认为对此无能为力。

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

---

¹尝试将 fiddle 中的字体大小更改为 5em，您会注意到旋转后的文本看起来非常好。对于小文本是不可能的，至少在当今屏幕的像素密度下是不可能的（在 Retina 显示器上可能比在普通 TFT 上看起来好一点）。