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

如果你想保持字体系列的一致性，在这种情况下＆＃39; Avenir＆＃39;而不是Avenir-light＆＃39;您可以使用以下语法：

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

此语法允许您保持字体系列名称一致，并且正常重量将正确显示。然后，目标元素的CSS将是：

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

Answer 2

font-weight: lighter告诉浏览器使用比继承权重更轻的字体。因此，如果父元素具有font-weight: bold，并且其子元素具有font-weight: lighter - 则该子元素将具有常规权重（即，比粗体更轻）。＆＃34;打火机＆＃34;是不是字体权重为100的同义词。

@font-face用于定义您的字体粗细，因此像“粗体”这样的术语。和“打火机”没有意义。当您想要使用字体时，您应该使用数值来定义字体和更轻/更粗的关键字。

Answer 3

我发现了一个可以区分较轻和普通字体权重的小黑客。

我刚刚改变了我的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 Avenir开始使用真正的正常体重，当我想使用lighter重量时，我只需将font-family更改为AvenirLight

为什么“较轻”@ font-face仍然显示为“普通”重量@ font-face

3 个答案: