Perché "più leggero" @ font-face appare ancora come il peso "normale" @ font-face

Question

Sto provando ad usare la versione "più leggera" del mio font, ma in firefox e chrome appare ancora come " normale "peso.

Ecco il mio 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"); 
} 

Ecco quello che sto usando per attivare la "leggera" peso sul H2 in #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; 
} 

si può vedere ciò che Parliamo di qui (passa il mouse su una delle immagini del prodotto):

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

Answer 1

Ho trovato un piccolo trucco che distingue tra pesi più chiari e normali.

Ho appena cambiato la mia Avenir accendino @font-face da:

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

a:

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

Per qualche motivo è stato con il più "leggero" spessore del carattere per normal e lighter. Dopo che ho fatto questo cambiamento l'normal Avenir iniziato a utilizzare il vero peso normale, e quando voglio utilizzare il peso lighter mi basta cambiare il font-family per AvenirLight

Answer 2

font-weight: lighter sta dicendo al browser di utilizzare un tipo di carattere più leggero di un modo di pensare peso. Quindi se un elemento genitore ha font-weight: bold ed è figlio ha font-weight: lighter - il bambino avrà un peso regolare (cioè più leggero che in grassetto). "leggera" è non sinonimo di un font-weight di 100.

@font-face viene utilizzato per definire i font, così termini come 'audace' e 'leggero' non hanno alcun significato. È necessario utilizzare valori numerici per definire i caratteri e le parole chiave più chiare/in grassetto quando si desidera utilizzare i caratteri.

Answer 3

Se si desidera mantenere il font-family coerente, in questo caso 'Avenir' e non 'Avenir-luce' è possibile utilizzare la seguente sintassi:

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

Questa sintassi permette di mantenere il carattere -family nome coerente e il peso normale verrà visualizzato correttamente. Il CSS per l'elemento di destinazione sarebbe allora:

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