12

我正在尝试使用字体的“较轻”版本，但在 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/

4

3 回答 3

12

font-weight: lighter告诉浏览器使用比继承权重更轻的字体。因此，如果父元素具有font-weight: bold，并且它的子元素具有font-weight: lighter- 子元素将具有常规重量（即比粗体轻）。“更轻”不是字体粗细为 100 的同义词。

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

于 2015-10-12T15:43:32.357 回答
11

如果您想保持字体系列一致，在这种情况下是“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;
}
于 2015-11-09T18:04:22.483 回答
5

我发现了一个小技巧，可以区分较轻和正常的字体粗细。

我刚把我的 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");
}

出于某种原因，它对normaland使用了“较轻”的字体粗细lighter。在我进行此更改后，normalAvenir 开始使用真正的正常重量，当我想使用lighter重量时，我只需将 font-family 更改为AvenirLight

于 2013-02-16T23:48:36.103 回答