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

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显示器默认使用子像素抗锯齿.

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

使用-webkit-font-smoothing: antialiased;问题元素只给力全像素抗锯齿处理所有的时间,你会失去过渡.有关Safari的抗锯齿功能的详细说明,请参阅此页面.