css - 为什么 "lighter"@font-face 仍然显示为 "normal"weight @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");
}

这是我用来激活 #home 中 H2 的“较轻”重量的方法:

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

font-weight: lighter 告诉浏览器使用比继承的字重更轻的字体。因此，如果父元素具有 font-weight: bold，而其子元素具有 font-weight: lighter - 子元素将具有常规重量(即比粗体更轻)。“打火机”不是字体粗细为 100 的同义词。

@font-face 用于定义您的字体粗细，因此像“粗体”和“浅色”这样的术语没有任何意义。当你想使用字体时，你应该使用数值来定义你的字体和更亮/更粗的关键字。