css3动画问题字体渲染

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

这里是我的动画代码：

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

这里有两张图片（之前和期间动画）

前：

enter image description here

后：

enter image description here

这正是对字体（之前或期间或之后的动画）

相同的设置是一个渲染设置？如果是的话，你们可以给我一点小费吗？

在此先感谢。

来源

2012-08-10 Simon

这可能与Safari所做的字体平滑处理有关，即对文本应用反锯齿。我的猜测是平滑不适用于动画。

我估计，设置以下将解决该问题：

-webkit-font-smoothing: none;

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

添加类似

-webkit-font-smoothing: antialiased;

你有可能应用正确的平滑状态。再次，这只是猜测，可能还没有一个基于CSS3的解决方案。在这种情况下，您可能不希望将大小调整应用于容器元素（例如缩放），并在字体大小上使用EM值。制作一个响应式容器。

如果这也没有帮助，那么除了在这里应用一些Javascript以外别无它法。

来源

2012-08-10 09:24:10 Hendrik

-webkit-font-smoothing：antialiased;解决了问题！谢谢！ – Simon 2012-08-10 12:26:07

我遇到了类似的问题，并在这里找到评论。通过添加这样的：

-webkit-font-smoothing: antialiased;

似乎解决在Safari我的问题（但屏幕不视网膜一个）。但仔细检查之后，我发现字体看起来比其他浏览器中的字体稍微薄一些。所以我改变了这个：

-webkit-font-smoothing: subpixel-antialiased;

这和解决我的问题完美。

如果有人遇到同样的问题，请在此留言。

来源

2016-09-09 08:40:59 Jin

css3动画问题字体渲染

回答

相关问题