css3动画问题字体渲染

Posted 2023-03-06

【中文标题】css3动画问题字体渲染

【英文标题】：css3 animation issue font rendering

【发布时间】：2012-08-07 13:39:13

【问题描述】：

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

这是两张图片（动画前后）

之前：

之后：

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

这是渲染设置吗？如果是的话，你们能给我一些建议吗？

提前致谢。

【参考方案1】：

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

 -webkit-font-smoothing: antialiased;

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

-webkit-font-smoothing: subpixel-antialiased;

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

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

【参考方案2】：

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

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

-webkit-font-smoothing: none;

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

添加类似的东西

-webkit-font-smoothing: antialiased;

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

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

【讨论】：

-webkit-font-smoothing：抗锯齿；解决了问题！谢谢！