Firefox Mac OSX - CSS转换后的文本不会平滑倾斜

Question

在实现一些花哨的CSS3并使其适用于所有浏览器时，我现在迷失在Firefox for Mac上：文本歪斜，但看起来不是很好。很难解释，它看起来不能使用子像素，因此总是跳跃全像素，使文本看起来很奇怪。

我创建了一个jsFiddle，所以你可以测试一下：

http://jsfiddle.net/8cYgM/2/

注意：该示例在以下浏览器中看起来不错：Chrome，Firefox（Windows 7），Safari（Mac），Internet Explorer 11

<div class="skewthis">
    <p>Some text download start</p>
    <p>000000ooooo</p>
</div>
<p>Note: Text looks not as smoothly skewed in Firefox on Mac as in other browsers</p>

.CSS

.skewthis {
    font-family: "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    width:350px;
    transform-origin:0% 0%;
    -ms-transform-origin:0% 0%;
    -webkit-transform-origin:0% 0%;
    transform:skew(0deg,2deg) translate3d( 0, 0, 0);
    -ms-transform:skew(0deg,2deg) translate3d( 0, 0, 0);
    -webkit-transform:skew(0deg,2deg) translate3d( 0, 0, 0);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
.skewthis p {
    font-size:17px;
    line-height:28px;
    padding:0 15px;
    display:inline-block;
    background-color:#009ccc;
    color:#fff;
    margin:12px 0 0;
}
.skewthis p:after {
    content:'';
    display:block;
    clear: both;
}

Answer 1

您寻找的答案可以在这里找到：

提高 css3 文本旋转质量

看起来这是FireFox浏览器中的常见问题。