当元素是CSS3动画时，Safari应用字体效果/处理

Question

我在我的网站上使用自定义字体。

@font-face {
    font-family: 'ProximaNovaCondensed-Regular';
    src: url('/media/fonts/proximanovacond-regular-webfont.eot');
    src: url('/media/fonts/proximanovacond-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('/media/fonts/proximanovacond-regular-webfont.woff') format('woff'),
    url('/media/fonts/proximanovacond-regular-webfont.ttf') format('truetype'),
    url('/media/fonts/proximanovacond-regular-webfont.svg#proxima_nova_cn_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

将脉动CSS3动画应用于文本元素时，字体渲染方法似乎发生了变化。

查看此比较图片：

这是在Safari中呈现的。

我发现了这个Q / A：Safari changing font weights when unrelated animations are running

根据那里所说的，一旦应用了动画，渲染就由GPU完成。在链接的Q / A中，问题集中在除受影响的元素之外的其他元素上，在我的情况下，实际元素受到影响。

问题是：

我可以以某种方式关闭或修改此行为，以便在整个页面中获得准确（统一）的字体渲染质量，无论我是否使用动画？

Answer 1

没有完美的解决方案，但您可以尝试添加-webkit-font-smoothing: antialiased;，看看是否有帮助。它可能会给你一个稍微瘦一点的字体，但它至少会统一。

编辑 - 抱歉，我刚看到“抗锯齿”修复程序已发布在您链接的问答语中。

有时，将-webkit-backface-visibility: hidden;添加到受影响的元素会有所帮助，但我不确定为什么会这样。

您还可以尝试使用-webkit-transform: translate3d(0,0,0);强制硬件加速并使字体（如上所述）统一但稍微更薄......

希望有所帮助！