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

Question

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

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

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

这是......之间的区别

和这个...

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

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

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

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;
}