Question

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

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

注意：该示例在以下浏览器中看起来很好：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浏览器中的常见问题。

Firefox Mac OSX - CSS转换后的文本不会顺利倾斜

1 个答案: