css - 当元素为 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 中呈现的。

我找到了这个问答:Safari changing font weights when unrelated animations are running

根据那里所说的，渲染是在应用动画后由 GPU 完成的。虽然在链接的问答中，问题集中在受影响元素以外的其他元素上，但在我的情况下，实际元素受到了影响。

问题是:

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

Answer 1

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

编辑 - 抱歉，我刚刚看到“抗锯齿”修复已发布在您链接到的 Q/A 中。

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

你也可以尝试 -webkit-transform: translate3d(0,0,0); 这将强制硬件加速并使字体，如上面的修复，统一但稍微更薄......

希望对您有所帮助!