旋转文本渲染不好答案

【问题标题】：Rotated Text doesn't render well旋转文本渲染不好
【发布时间】：2013-10-04 22:12:48
【问题描述】：

我正在尝试使用旋转以 45 度（或足够接近）显示 html 中的文本

不幸的是，它看起来一点也不好看。有谁知道解决这个问题的方法，或者可能是在 45 度时比其他字体呈现更好的字体？

下面的例子 http://jsfiddle.net/stevewill61/3WpfP/

jsfiddle 中横幅的 CSS 如下

.test:before {
    position: absolute;
    background: #008000;
    display: inline-block;
    content:'Live';
    -webkit-transform: rotate(-45deg);
    font-size: 10pt;
    top: 5px;
    left: -20px;
    font-weight: bold;
    color: #fff;
    padding: 2px 25px;
    box-shadow: 1px 1px 1px #000;
    font-family: Arial;
}

这是按要求提供的图片

http://oi39.tinypic.com/2607ifa.jpg

【问题讨论】：

请描述问题或分享截图。对我来说，文本在 chrome 上很好地显示，但在 Firefox 上没有旋转（可能是因为 webkit 前缀）。编辑：如果添加-moz-transform: rotate(-45deg);，在火狐上也能很好的显示
对我来说看起来不错。这是我看到的：i.stack.imgur.com/MJYRs.png

标签： html css webkit-transform

【解决方案1】：

您可以尝试添加字体平滑。我认为最大的问题是字体大小，如果你将大小增加 1 pt，它看起来会更清晰。

-webkit-font-smoothing: subpixel-antialiased;

或

-webkit-font-smoothing: antialiased;

这是一个小提琴： http://jsfiddle.net/stevewill61/3WpfP/

还有一些字体平滑的例子： http://maxvoltar.com/sandbox/fontsmoothing/

【讨论】：

即使用大字体更新它仍然看起来不对...jsfiddle.net/stevewill61/3WpfP/2
我将字体更改为arial，添加了阴影并删除了粗体。它在我的屏幕上看起来很流畅，虽然在我的机器上开始看起来并不算太糟糕，尽管 Mac 确实有更好的抗锯齿。 jsfiddle.net/BJpj2 i.imgur.com/rkaw9cl.png

【解决方案2】：

将-webkit-backface-visibility: hidden 添加到规则中

http://jsfiddle.net/3WpfP/5/的演示

【讨论】：