Question

出于某种原因，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中声明font-family的地方：

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

Answer 1

我想你的问题是WebKit的抗锯齿。具体来说，在转换或转换期间，抗锯齿是仅整个像素，但是当元素上没有转换或转换时，LCD显示器默认使用子像素抗锯齿。 / p>

亚像素抗锯齿通常是你想要的，因为它有助于提高可读性，但是当转换中涉及的某些东西停止，并且子像素抗锯齿接管时，差异就是不和谐。

在问题元素上使用-webkit-font-smoothing: antialiased;来强制执行全像素抗锯齿，您将失去该转换。请参阅this page，了解与Safari相比的抗锯齿效果。

Answer 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

第4.4节

中的更多详情here

Answer 3

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

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

Safari在悬停时用粗体加粗@ font-face字体

3 个答案: