Safari 在悬停时用浅色@font-face 字体加粗答案

【问题标题】：Safari bolding a light @font-face font on hoverSafari 在悬停时用浅色@font-face 字体加粗
【发布时间】：2014-05-28 20:27:13
【问题描述】：

由于某种原因，Safari 在过渡期间将我的浅色@font-face 字体加粗。

当您将鼠标悬停在产品图片上时，您可以看到 safari 在瞬间为文本添加粗体：

http://fine-grain-2.myshopify.com

这是我的@font-face 声明：

@font-face {
font-family: Avenir;
font-weight: normal;
font-style: normal;
src: url("AvenirLTStd-Medium.otf") format("opentype");
}

@font-face {
font-family: AvenirBold;
font-weight: normal;
font-style: normal;
src: url("AvenirLTStd-Black.otf") format("opentype");
}

@font-face {
font-family: AvenirLight;
font-weight: lighter;
font-style: normal;
src: url("AvenirLTStd-Light.otf") format("opentype");
}

这是我在主 CSS 中声明字体系列的地方：

body {
    background: none repeat scroll 0 0 #999999;
    font-family: AvenirLight;
    font-weight: lighter;
}

【问题讨论】：

页面比较复杂。尝试将问题简化为一个简单的测试用例。

标签： css fonts safari webkit font-face

【解决方案1】：

我想你的问题是 WebKit 的抗锯齿。具体来说，在过渡或变换期间，抗锯齿是仅全像素，但当元素上没有过渡或变换时，LCD 显示器将默认使用 亚像素 抗锯齿。

亚像素抗锯齿通常是您想要的，因为它有助于提高可读性，但是当过渡中涉及的某些东西停止并且亚像素抗锯齿接管时，差异就会很不协调。

在问题元素only上使用-webkit-font-smoothing: antialiased; 来一直强制全像素抗锯齿，您将失去该过渡。请参阅this page，了解有关 Safari 的抗锯齿的详细说明。

【讨论】：

哇，你就是那个男人！谢谢！你可以为 Firefox 做这样的事情吗？？
我不认为 FF 通过 CSS 提供任何抗锯齿控制。另一方面，我没有注意到 FF 中发生了这个问题。这很奇怪，因为在我看来，Safari 通常具有更美观的渲染效果。
这发生在 FF for Mac 中，这是一个非常烦人的问题。我现在可能只是让它滑动，看看它是否会在未来的版本中自我纠正。再次感谢！
啊，您指的是类型的沉重，而不是不和谐的过渡（在 FF 中不会发生对我来说）？是的，我想你已经被那个塞满了，我不相信你可以在 FF 中改变它。

【解决方案2】：

我可以在那里发现的一件事是：

@font-face {
    font-family: AvenirLight;
    font-weight: lighter;
    font-style: normal;
    src: url("AvenirLTStd-Light.otf") format("opentype");
}

lighter 不是 font-weight 属性的有效值。在这种情况下，有效值为： normal |粗体 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

更多详情here 见第 4.4 节

【讨论】：

阅读那里的规格 W3 链接或尝试验证。
您看错了部分。我告诉你看第 4.4 节你对嵌入字体感兴趣，而不是实际属性。以下部分是从上面 doc 本身的文档中添加的：不允许使用相对关键字，“bolder”和“lighter”。另外这里是验证截图：link
没问题。毕竟，我很好奇这是否是网页的问题。
进行了您建议的更改，但由于某种原因在 safari 中仍然加粗。
在另一个想法上，我看到您正在使用抗锯齿字体。然后尝试使用：-webkit-transform: translateZ(0);在您的班级叠加层上，或在那边的实际 h2 上。顺便说一句，我从这里进行了一些测试，我认为这与你如何加载字体无关。这是关于字体渲染的问题。还会发生吗？

【解决方案3】：

尽量避免使用-webkit-font-smoothing: antialiased;，因为不同浏览器的字体粗细会不一致。

我发现问题只发生在 opacity 属性的转换中。在某些情况下，RGB 背景可以解决问题。

【讨论】：