1

虽然实现了一些花哨的 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;
}
4

1 回答 1

0

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

提高 css3 文本旋转质量

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

于 2014-02-17T14:11:47.200 回答