4

我有一个问题问你。我目前正在研究文本动画，但我遇到了一些问题。当我使用 -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;
    }
}

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

前 ：

在此处输入图像描述

后：

在此处输入图像描述

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

那是渲染设置吗？如果是的话，你们能给我一些提示吗？

提前致谢。

4

2 回答 2

5

这可能与 Safari 所做的字体平滑有关，即对文本应用抗锯齿。我的猜测是动画时没有应用平滑。

我认为设置以下内容将解决问题：

-webkit-font-smoothing: none;

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

添加类似的东西

-webkit-font-smoothing: antialiased;

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

如果这也没有帮助，除了在这里应用一些 Javascript 之外别无他法。

于 2012-08-10T09:24:10.760 回答
0

我遇到了类似的问题并在此处找到评论。通过添加这个：

 -webkit-font-smoothing: antialiased;

似乎解决了我在 Safari 中的问题（但屏幕不是视网膜）。但仔细检查后，我发现该字体似乎比其他浏览器中的字体要苗条一些。所以我把它改成了：

-webkit-font-smoothing: subpixel-antialiased;

这完美地解决了我的问题。

在这里留下评论，以防有人遇到同样的问题。

于 2016-09-09T08:40:59.443 回答