2

出于某种原因，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;
}
4

3 回答 3

6

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

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

仅-webkit-font-smoothing: antialiased;在问题元素上使用以始终强制全像素抗锯齿，您将失去该过渡。有关Safari 抗锯齿的详细说明，请参阅此页面。

于 2013-03-01T22:36:22.553 回答
1

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

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

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

更多详细信息请参见第 4.4 节

于 2013-03-01T19:23:37.790 回答
0

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

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

于 2014-05-28T12:27:13.593 回答