何らかの理由で、Safariはトランジション中に私の明るい@font-faceフォントを太字にしています。
商品の画像にカーソルを合わせると、一瞬後にサファリがテキストに太字を追加しているのがわかります。
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;
}