Dlaczego "jaśniejsza" czcionka @ nadal pojawia się jako "normalna" waga @ twarz z czcionką

Question

Próbuję użyć "lżejszej" wersji mojej czcionki, ale w firefoxie i chrome nadal wygląda jak " normalna waga.

Oto moja 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"); 
} 

Oto co używam, aby uaktywnić "lżejsze" Ciężar na H2 w #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; 
} 

można zobaczyć, co ja "Mówimy tutaj (po prostu najedź na jeden z obrazów produktów):

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

Answer 1

Znalazłem mały hack, który rozróżnia lżejsze i normalne grubości czcionki.

Właśnie zmieniłem Avenir lżejsze @font-face od:

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

do:

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

Z jakiegoś powodu był przy użyciu "lżejszego" wagi czcionki dla normal i lighter. Po zrobiłem to zmianę normal Avenir zaczął używać prawdziwego normalnej wadze, a gdy chcę użyć masy lighter prostu zmienić font-family do AvenirLight

Answer 2

font-weight: lighter mówi przeglądarkę, aby korzystać z jaśniejszą czcionką niż dziedziczna waga. Jeśli więc element nadrzędny ma font-weight: bold, a jego dziecko ma font-weight: lighter - dziecko będzie miało prawidłową wagę (tj. Jaśniejszą niż pogrubioną). „lżejsze” jest nie synonimem font-weight 100.

@font-face służy do definiowania grubości, więc terminy takie jak „odważniejsze” i „lżejsze” nie mają żadnego znaczenia. Powinieneś użyć wartości liczbowych, aby zdefiniować swoje czcionki i lżejsze/odważniejsze słowa kluczowe, gdy chcesz korzystać z czcionek.

Answer 3

Jeśli chcesz zachować font-family spójne, w tym przypadku „Avenir”, a nie „Avenir-light” można użyć następującej składni:

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

Taka składnia pozwala zachować czcionkę -family name i normalna waga będą wyświetlane poprawnie. CSS dla elementu docelowego będzie wówczas:

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