火狐浏览器忽略CSS的字体粗细属性

Question

我不确定如何正确地显示具有3种字重的字体 - `normal`，`bold`和`lighter` - 但是，在大多数浏览器中似乎有效，除了Firefox。

Firefox似乎使用`font-weight: lighter`作为默认值？

我想要的是在Chrome中的字体外观。

@font-face {
    font-family: 'lovelo';
    src: url('../fonts/lovelo.eot');
    src: url('../fonts/lovelo.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lovelo.woff') format('woff'),
         url('../fonts/lovelo.ttf') format('truetype'),
         url('../fonts/lovelo.svg#loveloblack') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lovelo';
    src: url('../fonts/lovelo-bold.eot');
    src: url('../fonts/lovelo-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lovelo-bold.woff') format('woff'),
         url('../fonts/lovelo-bold.ttf') format('truetype'),
         url('../fonts/lovelo-bold.svg#loveloblack') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'lovelo';
    src: url('../fonts/lovelo-light.eot');
    src: url('../fonts/lovelo-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lovelo-light.woff') format('woff'),
         url('../fonts/lovelo-light.ttf') format('truetype'),
         url('../fonts/lovelo-light.svg#loveloblack') format('svg');
    font-weight: lighter;
    font-style: normal;
}

working example

- Sam Holguin

Answer 1

您可以尝试使用字重的实际数值。 400与font-weight:normal相同。 700与font-weight:bold相同。 100、200或300是其它可选数值。您需要选择一个达到您想要的效果。

- user1640021

---

谢谢您的建议。今晚在浏览 Mozilla 论坛时，我发现了使用数字值设置字体粗细的方法，但是当我尝试将 400 设置为正常粗细时仍然出现问题。如果我移除 'lighter' 字体设置，正常和加粗都可以正常显示。但是一旦添加 'lighter' 设置，Firefox 就会出现问题！？！ - Sam Holguin

lighter 不是 @font-face 规则中 font-weight 的有效值。请参阅 http://dev.w3.org/csswg/css-fonts/#descdef-font-weight 查看规范。 - Boris Zbarsky

Answer 2

我怀疑其他@font-face样式只是被最后一个覆盖了。

基本上，因为在三个具有相等特殊性的规则列表中最后出现，所以使用“font-weight: lighter;”。

我会将其缩减为一个@font-face，并将字重放在文本元素上，如下所示：

@font-face {
    font-family: 'lovelo';
    src: url('../fonts/lovelo-light.eot');
    src: url('../fonts/lovelo-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lovelo-light.woff') format('woff'),
         url('../fonts/lovelo-light.ttf') format('truetype'),
         url('../fonts/lovelo-light.svg#loveloblack') format('svg');
    font-style: normal;
}

p{
    font-weight: lighter;
}

- apaul

---

如果我只使用一个字体，比如lovelo-lighter，那么“normal”字体肯定不会显示出来了，这是我的理解有误吗？ :) - Sam Holguin

Answer 3

感谢 @user1640021

我进一步尝试了一下用数字值来表示font-weight，在Firefox中似乎已经解决了问题！

@font-face {
    font-family: 'lovelo';
    src: url('../fonts/lovelo.eot');
    src: url('../fonts/lovelo.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lovelo.woff') format('woff'),
         url('../fonts/lovelo.ttf') format('truetype'),
         url('../fonts/lovelo.svg#lovelo') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'lovelo';
    src: url('../fonts/lovelo-bold.eot');
    src: url('../fonts/lovelo-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lovelo-bold.woff') format('woff'),
         url('../fonts/lovelo-bold.ttf') format('truetype'),
         url('../fonts/lovelo-bold.svg#lovelo-bold') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'lovelo';
    src: url('../fonts/lovelo-light.eot');
    src: url('../fonts/lovelo-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lovelo-light.woff') format('woff'),
         url('../fonts/lovelo-light.ttf') format('truetype'),
         url('../fonts/lovelo-light.svg#lovelo-light') format('svg');
    font-weight: 200;
    font-style: normal;
}

工作示例

- Sam Holguin

---

@apaul34208 但是我正在使用三种不同的字体？ - Sam Holguin