如何让Chrome在FadeIn（）期间应用字体平滑？

Question

我有一个很大的标题，我希望在页面加载后逐渐淡入。我使用以下jQuery代码片段来实现这一点。

$('#primary').fadeIn(1000);

然而，在过渡期间，Chrome似乎不会应用抗锯齿（或字体平滑），直到效果结束。在淡入结束并应用字体平滑之后，这会产生明显的抖动。 IE，Firefox和Safari都运行良好。

这是......

之间的区别

这就是......

这可以在这里看到：http://jsfiddle.net/68Bmd/

有关如何让Chrome在淡入过程中应用字体平滑的任何想法？

P.S。我知道我可以禁用字体平滑。这会删除混蛋，但它会使字体看起来很糟糕。

Answer 1

我试图在标题前面加上一个阴影并将其淡化，这似乎有效。

html：

<div id="container">
    <div id="shadow"></div>
    <h1 id="primary">This is a Title</h1>
</div>

和css：

#shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: #fff;
}

http://jsfiddle.net/57x88/1/

Answer 2

这是一个使用动画的CSS解决方案。请注意，如果在Chrome中使用，则需要添加浏览器前缀。

@keyframes fade-in {
    from {
        color: #fff;   
    }

    to {
        color: #000;
    }
}

#primary {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 100px;
    animation: fade-in 1s linear;
}