1

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

@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 在运行不相关的动画时更改字体粗细

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

问题是：

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

4

1 回答 1

1

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

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

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

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

希望有帮助！

于 2012-12-28T18:47:44.950 回答