animation - 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 别无他法。