使用 addClass 设置动画会改变字体粗细

Question

我遇到了一个非常奇怪的问题。幸运的是你能看到问题，我把文件上传到这里：

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

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

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

我已经在 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;
}

Answer 1

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

-webkit-transform: translateZ(0px);

使用 addClass 设置动画会改变字体粗细

Animating with addClass changes font-weight

css

jquery

fonts

hover

jquery-animate