macos - Firefox Macos - 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

您寻找的答案可能在这里找到:

Improve css3 text rotation quality

这似乎是 FireFox 浏览器中的常见问题。