Html 旋转文本不'；不好渲染

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

不幸的是，它看起来一点也不好。有没有人知道一种方法来解决这个问题，或者一种字体在45度时比其他字体的渲染效果更好

下面的例子

JSFIDLE中旗帜的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;
}

这是你要的照片

---

您可以尝试添加字体平滑。 我认为最大的问题是字体大小，如果你把大小再放大1磅，看起来就会清晰得多

-webkit-font-smoothing: subpixel-antialiased;

或

这是一把小提琴：

以及字体平滑的一些示例：

---

将

-webkit背面可见性：隐藏
添加到规则中

演示位于
请描述问题或共享屏幕截图。对我来说，文本在chrome上显示得很好，但在Firefox上没有旋转（可能是因为webkit前缀）。编辑：如果添加
-moz变换：旋转（-45度），它在Firefox上也显示得很好，我觉得很好。这就是我所看到的：即使用大字体更新，它看起来仍然不对。。。我将字体改为arial，添加了阴影并删除了粗体。它在我的屏幕上看起来非常平滑，虽然它在我的机器上看起来并不太糟糕，尽管Mac电脑确实有更好的抗锯齿功能。
-webkit-font-smoothing: antialiased;