CSS3动画问题字体渲染(css3 animation issue font rendering)

我有一个问题问你。我目前正在对文本动画和我有一点问题的。当我使用类似的属性-webkit-改变我的字体在动画过程中从正常变为更薄，恢复到正常的当动画结束。

这里是我的动画代码：

@-webkit-keyframes flipOne {
    0% {
        -webkit-transform: perspective(40000px) rotateY(0);
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: perspective(40000px) rotateY(720deg);
        -webkit-animation-timing-function: ease-in;
    }
}

这里有两张图片（之前和动画过程中）

之前：

后：

这正是对字体相同的设置（之前或期间或之后，动画）

那是一个渲染设置？如果是的话，你们可以给我一点建议吗？

提前致谢。

Answer 1:

这可能与字体平滑是Safari浏览器也，即应用抗锯齿的文本。我的猜测是，虽然动画平滑不适用。

我估计，设置以下将解决这个问题：

-webkit-font-smoothing: none;

但它也可能是有点问题的，因为它最有可能会呈现文本像素化所有的时间。我也没办法，现在来测试这一权利，对不起。

添加类似

-webkit-font-smoothing: antialiased;

在美国你有可能正确地应用平滑。同样，这仅仅是猜测，有可能不是一个基于CSS3的解决方案呢。在这种情况下，你可能会wan't尺寸调整应用到容器元素（例如缩放）和字体大小，使用EM值。做出反应容器。

如果这样做没有帮助，有没有其他办法，只能适用于这里一些JavaScript。

Answer 2:

我遇到了类似的问题，在这里找到了意见。通过添加这样的：

 -webkit-font-smoothing: antialiased;

似乎解决在Safari我的问题（但屏幕不视网膜一个）。但是，仔细检查之后，我发现，字体似乎有点比它看起来像在其他浏览器更加纤薄。所以我把它改为：

-webkit-font-smoothing: subpixel-antialiased;

这完美地解决我的问题。

留在这儿情况的评价是有人可能会遇到同样的问题。

文章来源: css3 animation issue font rendering