Question

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

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

这需要在SAFARI中查看。要完全理解类型面部应该是什么样子，在其他浏览器中它不会改变，因此您只能看到粗体版本。

在这个网站上，我正在用.addClass实现一个悬停。当您将鼠标悬停在顶部栏上时，它是任何带有数字的彩色框，您将看到栏下的徽标向上滑动并失去其不透明度。我真正的问题是font-weight。当您将鼠标悬停在顶部栏上时，您会发现所有白色文本都会失去一点重量，变得更薄。然后当动画完成时，它会返回更大胆的外观。类型面的真实外观是更薄的版本，我无法找到一种方法来使类型面看起来那样。

我在DOM中的几乎每个元素上都尝试过font-weight：normal但仍然无法使其工作。我也尝试将这个规则应用于身体：

-webkit-font-smoothing: subpixel-antialiased;

但是这只会阻止类型在悬停时变薄，并在两种状态下保持更大胆。在查看上面链接的页面时，您可以轻松查看Web检查器中每个元素的CSS和HTML。我知道这必须是一个简单的问题，我似乎无法弄明白。

这是我的@ font-face规则的CSS。型号为Din Next LT Pro UltraLight适用于较大的数字和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进行动画处理会更改font-weight

1 个答案: