css - Firefox 忽略 CSS font-weight 属性

Question

不确定我是否使用了正确的过程来显示具有 3 个权重的字体——“正常”、“粗体”和“更轻”——但是，它似乎在大多数浏览器中都有效，除了 Firefox。

Firefox 似乎在使用 `font-weight: light`；作为默认？

字体在 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 相同:正常。
700 与 font-weight: 粗体相同。
100、200 或 300 是附加值。您必须选择一种您想要的效果。