2

我敢肯定你会注意到 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");

结果好多了。文字对齐很好，没有松脆和锯齿状的效果。但是......现在文字有点模糊。不是因为 filter blur，所以任何其他过滤器的结果都是一样的。再次，-webkit-font-smoothing没有效果。

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

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

提前致谢！

4

1 回答 1

1

我认为对此无能为力。

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

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

于 2013-04-13T14:24:52.207 回答