css3动画问题字体渲染

Question

我有一个问题要问你。我正在研究文本动画，我有一点问题。当我使用像-webkit-transform这样的属性时，我的字体在动画过程中从普通变为更薄，并在动画结束时恢复正常。

这是我的动画代码：

@-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的解决方案。在这种情况下，您可能不想将大小调整应用于容器元素（例如缩放）并在字体大小上使用EM值。制作一个响应式容器。

如果这也没有帮助，除了在这里应用一些Javascript之外别无他法。

Answer 2

我遇到了类似的问题并在此处找到了评论。 加上这个：

 -webkit-font-smoothing: antialiased;

似乎在safari中解决了我的问题（但屏幕不是视网膜）。但仔细检查后，我发现字体看起来比其他浏览器看起来要小一些。所以我改为：

-webkit-font-smoothing: subpixel-antialiased;

这完全解决了我的问题。

如果有人可能遇到同样的问题，请在这里发表评论。