为什么“较轻”@font-face 仍然显示为“正常”重量@font-face答案

【问题标题】：Why does "lighter" @font-face still appear as the "normal" weight @font-face为什么“较轻”@font-face 仍然显示为“正常”重量@font-face
【发布时间】：2013-02-01 16:50:15
【问题描述】：

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

【问题讨论】：

将font-weight 值更改为500、600、700、800、900 和bold 中的任何一个肯定会更改文本。所有其他值显示为“正常”。我不是说这是正确；我只是添加一些额外的细节。
@JamesA.Rosen 你是在说我的网站吗？我知道这很奇怪，因为“较轻”值应该将文本更改为较细的字体变体。
我同意。我正在确认并添加一些额外的细节，希望它可能对其他人有用。
感谢詹姆斯的帮助！
相关：stackoverflow.com/questions/10627810/…。不幸的是，使用100 解决了这个问题，但这里没有。你确定有问题的字体有更轻的版本吗？

标签： css fonts font-face

【解决方案1】：

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

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

【讨论】：

精彩的解释！多亏了你，我终于能够理解发生了什么。

【解决方案2】：

如果您想保持字体系列一致，在这种情况下是“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;
}

【讨论】：

谢谢，这是更一致的解决方案。

【解决方案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

【讨论】：

根据字体系列和浏览器的不同，您可能需要使用这个技巧来获得浅色字体。您实际上是在声明一个字体，就好像它是一个字体系列（并使用该“系列”的“正常”字体）。 FontSquirrel 在其字体生成器中一直这样做。考虑将此报告给字体供应商；此问题的原因尚不清楚，可能取决于字体文件格式。在任何情况下，尝试使用font-weight 时，请使用字体供应商提供的数值，而不是相对关键字lighter。
嗨。这里的问题完全相同，但字体不同。我也使用了font-weight: lighter，它基本上覆盖了我对font-weight: normal 的第二个定义。修复是使用数值。那么一切都很好。从这个意义上说，我确认@JukkaK.Korpela 的最后一句话
这不是一致的解决方案，请参阅其他答案。