Firefox 忽略 CSS font-weight 属性

不确定我是否使用正确的流程来显示具有 3 种粗细的字体 - “正常”、“粗体”和“较亮” - 但是，它似乎适用于大多数浏览器（除了 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;
}

工作示例 http://www.universalphysique.co.uk/

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