Firefox忽略CSS字体重量属性

我不确定我是否使用了正确的方法来显示一个有3个权重的字体——“正常”、“粗体”和“更轻”——但是，除了Firefox之外，它似乎在大多数浏览器中都能正常工作

Firefox似乎在使用“字体重量：更轻”；默认情况下

字体在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;
}

---

您可以尝试使用实际数字作为字体大小。 400与字体大小相同：正常。 700与字体大小相同：粗体。

---

100、200或300是附加值。您必须选择一种您想要的效果。

我怀疑其他@font-face样式只是被最后一种过度书写了

基本上

字体重量：更轻是因为它在三条规则列表中以相同的特定性出现在最后

我会将其裁剪为一个@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;
}

谢谢@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;
}

谢谢你的建议。今天晚上，我在查看Mozilla论坛时遇到了使用数值表示字体大小的问题，但在尝试使用400表示正常字体时，仍然出现了不足。如果我删除“打火机”字体，正常和粗体都可以。因为某些原因，包括“打火机”会把它扔进Firefox<代码>打火机

不是

@font-face

规则中的

字体重量

的有效值。请参阅规范。如果我使用单一字体，例如lovelo打火机，“普通”字体肯定不会显示？还是我误读了你的建议？：）@apaul34208但我使用了3种不同的字体？？