CSS3动画问题字体渲染 [英] css3 animation issue font rendering

问题描述

我对你的问题。我目前正在对文本动画和我有一点问题的。当我使用类似的属性-webkit-改变我的字体在动画过程中正常去更薄，恢复到正常的时候动画就结束了。

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.

下面是我的code为动画：

Here is my code for the animation :

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

和这里有两张图片（前后动画过程中）

and here are the two pictures (before and during the animation)

在

在

这正是为这些字体相同的设置（之前或期间或动画完成后）

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溶液爱好。在这种情况下，你可能会wan't来调整大小适用于容器元素（例如缩放）和字体大小，使用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.

如果这并没有帮助，没有其他办法，只能适用于这里一些JavaScript。

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

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