Почему "светлее" @font-face по-прежнему отображается как "нормальный" вес @ font-face

Question

Я пытаюсь использовать "более легкую" версию моего шрифта, но в 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;
}

Вы можете видеть то, о чем я говорю (просто наведите курсор на одно из изображений продукта):

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

Answer 1

Я нашел небольшой взлом, который различает более легкий и нормальный вес шрифта.

Я просто поменял зажигалку 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, После того как я сделал это изменение normal Авенир начал использовать реальный нормальный вес, и когда я хочу использовать lighter вес я просто изменить семейство шрифтов на AvenirLight

Answer 2

font-weight: lighter говорит браузеру использовать более легкий шрифт, чем унаследованный вес. Так что если родительский элемент имеет font-weight: boldи у него есть ребенок font-weight: lighter - ребенок будет иметь нормальный вес (т.е. легче, чем жирный). "Зажигалка" не является синонимом шрифта весом 100.

@font-face используется для определения веса шрифта, поэтому такие термины, как "жирный" и "более светлый", не имеют значения. Вы должны использовать числовые значения, чтобы определить свои шрифты и более светлые / более смелые ключевые слова, когда вы хотите использовать шрифты.

Answer 3

Если вы хотите, чтобы семейство шрифтов было согласованным, в данном случае "Avenir", а не "Avenir-light", вы можете использовать следующий синтаксис:

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

Этот синтаксис позволяет поддерживать постоянство имени семейства шрифтов, и нормальный вес будет отображаться правильно. CSS для целевого элемента будет:

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