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屋!