为什么"较轻"@ 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");
}

这是我用来激活H2in中"更轻"的重量#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

font-weight: lighter告诉浏览器使用比继承权重更轻的字体.因此,如果父元素具有font-weight: bold,并且它的子元素具有font-weight: lighter- 则子元素将具有常规权重(即,比粗体更轻)."light" 不是字体权重为100的同义词.

@font-face用于定义字体粗细,因此像"粗体"和"较轻"这样的术语没有任何意义.当您想要使用字体时,您应该使用数值来定义字体和更轻/更粗的关键字.

Answer 2

如果你想保持font-family的一致性,在这种情况下'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;
}

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.在我做了这个改变后,normalAvenir开始使用真正的正常体重,当我想使用lighter体重时,我只需将font-family更改为AvenirLight