如何让 Chrome 在 FadeIn() 期间应用字体平滑？答案

【问题标题】：How do I get Chrome to apply font smoothing during FadeIn()?如何让 Chrome 在 FadeIn() 期间应用字体平滑？
【发布时间】：2014-08-12 18:06:18
【问题描述】：

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

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

但是，在过渡期间，Chrome 似乎在效果完成之前不会应用抗锯齿（或字体平滑）。这会在淡入结束和应用字体平滑后产生明显的抖动。 IE、Firefox 和 Safari 都可以正常工作。

这就是这个的区别……

还有这个……

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

关于如何让 Chrome 在淡入期间应用字体平滑的任何想法？

附：我知道我可以禁用字体平滑。这消除了混蛋，但它使字体看起来很糟糕。

【问题讨论】：

标签： javascript jquery css google-chrome

【解决方案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/

【讨论】：

太棒了。非常感谢。

【解决方案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;
}

【讨论】：

作为警告，请勿使用页脚来宣传您的网站。我正在删除所有这些。