Animation css3动画问题字体渲染

我有个问题要问你。我目前正在做文字动画，我有一个小问题。当我使用诸如-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;
    }
}

下面是两张图片（动画之前和动画期间）

之前：

之后：

字体的设置完全相同（动画之前、期间或之后）

这是渲染设置吗？如果有的话，你们能给我一些建议吗

---

提前感谢。

这可能与Safari的字体平滑有关，即对文本应用抗锯齿。我猜在设置动画时不会应用平滑

我认为设置以下选项可以解决问题：

-webkit-font-smoothing: none;

但这也可能是一个小问题，因为它很可能会使文本一直处于像素化状态。对不起，我现在没有办法测试这个

添加类似于

-webkit-font-smoothing: antialiased;

对于已设置的状态，可以正确应用平滑。同样，这只是猜测，可能还没有基于CSS3的解决方案。在这种情况下，您可能不想对容器元素应用大小调整（例如缩放），而在字体大小上使用EM值。制作一个反应灵敏的容器

---

如果这也没有帮助，那么除了在这里应用一些Javascript之外，没有其他方法了。

我遇到了类似的问题，并在这里找到了注释。 加入以下条文：

 -webkit-font-smoothing: antialiased;

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

-webkit-font-smoothing: subpixel-antialiased;

这完美地解决了我的问题

---

在此处留下评论，以防有人遇到同样的问题。

-webkit字体平滑：抗锯齿；解决了这个问题！谢谢