3

不确定我是否使用正确的过程来显示具有 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;
}

工作示例

4

3 回答 3

4

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

于 2013-07-01T23:14:46.467 回答
1

我怀疑其他@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;
}
于 2013-07-01T23:19:33.943 回答
0

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

工作示例

于 2013-07-02T09:33:25.820 回答