css3动画问题字体呈现 [英] css3 animation issue font rendering

问题描述

我有一个问题。我目前正在处理文本动画，我有一个小问题。当我使用像-webkit-transform这样的属性时，我的字体在动画过程中从正常变为稀薄，并在动画结束时恢复正常。

I have a question for you. I'm currently working on text animation and i have a little problem with it. When I use properties like -webkit-transform my font goes from normal to thinner during the animation and goes back to normal when the animation is over.

动画：

@-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;
    }
}

这里是两张照片动画）

之前：

之后：

这些字体的设置完全相同在动画之前或期间或之后）

It's exactly the same settings for the fonts (before or during or after the animation)

这是一个渲染设置吗？

Is that a rendering settings ? If yes, can you guys give me a little tips ?

提前感谢。

推荐答案

这可能与Safari所执行的字体平滑有关，即对文本应用反锯齿。我猜想在动画处理时不应用平滑。

This is probably related to the font-smoothing that Safari does, i.e. applying anti-aliasing to the text. My guess is that the smoothing is not applied while animating.

我估计这个设置会解决这个问题：

I'd reckon that setting the following will fix the problem:

-webkit-font-smoothing: none;

但它也可能有点问题，因为它很可能会渲染文本像素化所有时间。我现在没有办法测试这个，对不起。

But it might also be a bit of a problem as it most likely will render the text pixelated all the time. I have no means to test this right now, sorry.

添加类似

-webkit-font-smoothing: antialiased;

到您可能正确应用平滑的状态。再次，这只是猜测，可能没有一个基于CSS3的解决方案。在这种情况下，您可能无法对容器元素应用调整大小（例如缩放），并对字体大小使用EM值。创建一个响应式容器。

to the states you have might apply the smoothing correctly. Again, this is just guesses and there might not be a CSS3 based solution yet. In that case, you might wan't to apply the resizing to the container element (for example zoom) and use EM values on your font size. Make a responsive container.

如果这也没有帮助，除此之外别无他法。

If that doesn't help either, there is no other way but to apply some Javascript here.

这篇关于css3动画问题字体呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！