12

フォントの「より軽い」バージョンを使用しようとしていますが、Firefox と chrome ではまだ「通常の」太さとして表示されます。

ここに私のfont.cssがあります：

@font-face {
font-family: Avenir;
font-weight: normal;
src: url("AvenirLTStd-Medium.otf") format("opentype");
}

@font-face {
font-family: Avenir;
font-weight: bold;
src: url("AvenirLTStd-Black.otf") format("opentype");
}

@font-face {
font-family: Avenir;
font-weight: lighter;
src: url("12-Avenir-Light.ttf") format("opentype");
}

で「軽い」ウェイトをアクティブにするために使用しているものは次のH2とおり#homeです。

body {
    background: none repeat scroll 0 0 #DADAD2;
    font-family: 'Avenir',sans-serif;
    font-weight: normal;
}

#home .six.columns h2 {
    color: #FAFAFA;
    display: block;
    font-size: 1.8em;
    font-weight: lighter;
    letter-spacing: 0.3em;
    margin-top: 25%;
    text-align: center;
}

ここで私が話していることを確認できます (製品画像の 1 つにカーソルを合わせるだけです)。

https://fine-grain-2.myshopify.com/

4

3 に答える 3

11

font-family の一貫性を維持したい場合、この場合は「Avenir-light」ではなく「Avenir」で、次の構文を使用できます。

@font-face {
    font-family: Avenir;
    font-weight: 100;
    src: url("12-Avenir-Light.ttf") format("opentype");
}

この構文により、font-family 名の一貫性を保つことができ、通常の太さが正しく表示されます。ターゲット要素の CSS は次のようになります。

.targetElement{
    font-family: Avenir;
    font-weight: lighter;
}
于 2015-11-09T18:04:22.483 に答える
5

軽いフォントと通常のフォントの太さを区別するちょっとしたハックを見つけました。

Avenir ライター@font-faceを以下から変更しました。

@font-face {
    font-family: Avenir;
    font-weight: lighter;
    src: url("12-Avenir-Light.ttf") format("opentype");
}

に：

@font-face {
    font-family: AvenirLight;
    font-weight: normal;
    src: url("12-Avenir-Light.ttf") format("opentype");
}

何らかの理由で、 と に「より軽い」フォントの重みを使用していましnormalたlighter。この変更を行った後、normalAvenir は実際の通常の太さを使用し始めました。この太さを使用したい場合はlighter、font-family を次のように変更します。AvenirLight

于 2013-02-16T23:48:36.103 に答える