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之外别无他法.