使用 addClass 进行动画更改字体粗细答案

【问题标题】：Animating with addClass changes font-weight使用 addClass 进行动画更改字体粗细
【发布时间】：2015-11-05 23:13:32
【问题描述】：

我遇到了一个非常奇怪的问题。幸运的是你可以看到问题，我已经在这里上传了文件：

http://www.unf.edu/~n00804716/untitled%20folder/index.html

这需要在 Safari 中查看。为了完全理解字体应该是什么样子，在其他浏览器中它不会改变，所以你只会看到粗体版本。

在这个站点上，我正在使用 .addClass 实现悬停。当您将鼠标悬停在顶部栏（其中包含任何带有数字的彩色框）上时，您会看到栏下方的徽标向上滑动并失去不透明度。我真正的问题是字体粗细。当您将鼠标悬停在顶部栏上时，您可以看到所有的白色文本都减轻了一点重量，变得更薄了。然后当动画完成后，它会恢复到更大胆的外观。字体的真实外观是更薄的版本，我找不到让字体看起来那样的方法。

我已经在 DOM 中的几乎每个元素上尝试了 font-weight: normal ，但仍然无法让它工作。我也尝试将此规则应用于正文：

-webkit-font-smoothing: subpixel-antialiased;

但这只是防止字体在悬停时变瘦，并使其在两种状态下都变粗。查看我上面链接的页面时，您可以轻松地在 Web 检查器中查看每个元素的 CSS 和 HTML。我知道这一定是一个简单的问题，但我似乎无法弄清楚。

这是我的 @font-face 规则的 CSS。字体较大的字体为 Din Next LT Pro UltraLight Condensed，较小的字体为 Din Next Pro Bold：

@font-face {
    font-family:'DINNextLTPro-UltraLightCond';
    src: url('fonts/DINNextLTPro-UltraLightCond_gdi.eot');
    src: url('fonts/DINNextLTPro-UltraLightCond_gdi.eot?#iefix') format('embedded-opentype'),
        url('fonts/DINNextLTPro-UltraLightCond_gdi.woff') format('woff'),
        url('fonts/DINNextLTPro-UltraLightCond_gdi.ttf') format('truetype'),
        url('fonts/DINNextLTPro-UltraLightCond_gdi.svg#DINNextLTPro-UltraLightCond') format('svg');
    font-weight: 250;
    font-style: normal;
    font-stretch: condensed;
    unicode-range: U+0020-25CA;
}

【问题讨论】：

我可能是盲人，但我看不出有什么不同。你用的是什么浏览器？
@user3515065 糟糕，完全忘记了您需要在 safari 中查看它。没有在 FF 中检查过，但在 Chrome 中没有发生
@user3515065 但无论如何，在任何浏览器中，如果有人可以使字体粗细正常（比看起来更细），任何帮助都是巨大的帮助。
Safari 在使用过渡动画的元素上更改其字体平滑，可能会节省资源以提高性能。 stackoverflow.com/questions/12502234/…
@mlnmln 非常感谢您分享这个问题。

标签： jquery css fonts hover jquery-animate

【解决方案1】：

对父元素强制硬件加速似乎可以解决问题

-webkit-transform: translateZ(0px);

【讨论】：