Warum erscheint "Feuerzeug" @ font-face immer noch als "normales" Gewicht @ font-face

Ich versuche, die "leichtere" Version meiner Schriftart zu verwenden, aber in Firefox und Chrome erscheint es immer noch als " Normalgewicht.Warum erscheint "Feuerzeug" @ font-face immer noch als "normales" Gewicht @ font-face

Hier ist meine 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"); 
}

Hier ist, was ich bin mit dem "leichter" Gewicht auf die H2 in #home zu aktivieren:

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; 
}

Sie sehen, was ich rede hier (schwebe einfach über eines der Produktbilder):

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

Quelle

2013-02-16 novicePrgrmr

Ändern des 'font-weight' -Wertes in einen der Werte' 500', '600',' 700', '800',' 900' und 'bold 'ändert definitiv den Text. Alle anderen Werte erscheinen als "normal". Ich sage nicht, dass das * korrekt ist *; Ich füge nur ein paar zusätzliche Details hinzu. –

@ JamesA.Rosen Sprechen Sie über auf meiner Website? Ich weiß, es ist wirklich komisch, weil der "leichtere" Wert den Text in die dünnere Schriftvariante ändern sollte. – novicePrgrmr

stimme ich zu. Ich bestätigte und fügte einige zusätzliche Details in der Hoffnung hinzu, dass es für jemand anderen nützlich sein könnte. –

Ich fand einen kleinen Hack, der zwischen den leichteren und normalen Schriftgewichten unterscheidet.

Ich habe gerade meine Avenir leichter @font-face aus:

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

zu:

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

Aus irgendeinem Grund ist es für normal und lighter mit dem "leichter" font Gewicht war. Nachdem ich diese Änderung der normal Avenir begann die wirkliche Normalgewicht verwendet wird, und wenn ich das lighter Gewicht verwenden möchten wechsle ich nur die Schriftart-Familie AvenirLight

Quelle

2013-02-16 23:48:36 novicePrgrmr

Dies ist ein Trick, den Sie verwenden müssen, um eine Lichtschrift zu erhalten, abhängig von der Schriftfamilie und dem Browser. Sie deklarieren effektiv eine Schriftart, als ob es eine Schriftfamilie wäre (und verwenden eine "normale" Schriftart dieser "Familie"). FontSquirrel macht das ständig in seinem Fontgenerator. Erwägen Sie, dies dem Hersteller der Schriftart mitzuteilen; Die Ursachen für dieses Problem sind unklar und können vom Format der Schriftartdatei abhängen. Verwenden Sie in jedem Fall 'font-weight', verwenden Sie den numerischen Wert des Herstellers, nicht das relative Schlüsselwort' lighter'. –

Ok, das ist sehr gut zu wissen. Danke für die Hilfe! – novicePrgrmr

hat font-weight: 100 nicht funktioniert? – Lane

font-weight: lighter wird der Browser zu sagen eine hellere Schrift als eine vererbte zu verwenden Gewicht. Wenn also ein Elternelement font-weight: bold hat und das Kind font-weight: lighter hat, hat das Kind ein normales Gewicht (d. H. Leichter als fett). „leichter“ ist nicht ein Synonym für einen font-weight von 100.

@font-face verwendet, um Ihre Schriftschnitt zu definieren, so Begriffe wie ‚kühne‘ und ‚leichter‘ keine Bedeutung haben. Sie sollten numerische Werte verwenden, um Ihre Schriftarten zu definieren, und die leichter/fett gedruckten Schlüsselwörter, wenn Sie die Schriftarten verwenden möchten.

Quelle

2015-10-12 15:43:32

Wenn Sie das font-family konsistent zu halten, in diesem Fall 'Avenir' und nicht 'Avenir-light' können Sie die folgende Syntax verwenden:

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

Diese Syntax ermöglicht es Ihnen, die Schriftart zu halten -Familienname konsistent und das normale Gewicht wird korrekt angezeigt. Das CSS für das Zielelement wäre dann:

.targetElement{ 
    font-family: Avenir; 
    font-weight: lighter; 
}

Quelle

2015-11-09 18:04:22 PatrickPDD

Danke, das ist eine konsistentere Lösung. –

Dies sollte die akzeptierte Lösung sein –

Warum erscheint "Feuerzeug" @ font-face immer noch als "normales" Gewicht @ font-face

Antwort

Verwandte Themen