2

何らかの理由で、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;
}
4

3 に答える 3

1

そこで見つけたのは、次の場所です。

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

ライターは font-weight プロパティの有効な値ではありません。この場合の有効な値は次のとおりです。太字 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

詳細については、セクション 4.4 を参照してください。

于 2013-03-01T19:23:37.790 に答える
0

-webkit-font-smoothing: antialiased;font-weights はブラウザによって異なるため、 の使用は避けてください。

opacity プロパティの遷移でのみ問題が発生することがわかりました。場合によっては、rgba バックグラウンドでうまくいくことがあります。

于 2014-05-28T12:27:13.593 に答える