Firefox 忽略 CSS font-weight 属性

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

Answer 1

您可以尝试使用实际数字作为字体粗细。 400 与 font-weight: normal 相同。 700 与 font-weight: 粗体相同。 100、200 或 300 是附加值。你必须选择一个你想要的效果。

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

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

working example