css - firefox 上的 font-face 在使用 font-weight normal 时会导致问题

Question

我遇到了一个非常奇怪的错误。我已经设置了自定义字体:

@font-face {
    font-family: 'MyAwesomeFont';
    src: '...';
    font-weight: 'normal;
}

@font-face {
    font-family: 'MyAwesomeFont';
    src: '...';
    font-weight: 'bold;
}

还有大约 3 个，名称相同但 font-weight 不同(bolder、100 和 200)。当使用 normal 时，Firefox 使用 bold 代替 - 我的意思是，它没有告诉我它使用另一个，但其他浏览器的行为并不像根本...

我尝试使用任意值而不是 normal 但这只会搞砸其他浏览器。有什么想法我应该尝试做什么吗？

更新

我只是为所有字体使用了精确的数字。我用 400 作为普通值，所以从技术上讲是一样的。但现在 Firefox 可以正确呈现它。我非常不确定到底发生了什么......

Answer 1

当使用您“自己的”字体时，分别确保某种字体可用，您应该遵循某些事项。

首先是如何使用@font-face:
始终使用数字 (100 - 900) 作为字体粗细并定义字体样式(大多数字体都有单独的普通和斜体文件(不同的粗细 = 字体粗细)

@font-face {
    font-family: 'MyAwesomeFont';
    src: '...';
    font-weight: 400; /* 'normal' equals to '400' */
    font-style: normal;
}

@font-face {
    font-family: 'MyAwesomeFont';
    src: '...';
    font-weight: 700; /* 'bold' depends on your available font files, normally it is equal to '700' */
    font-style: normal;
}

您可以在此站点上找到有关font-weight 的更多信息:https://developer.mozilla.org/en/docs/Web/CSS/font-weight

如果没有加载需要的字体，可以检查以下几点:

1. 确保源代码中只给出了所需的格式(例如 WOFF)，并使用浏览器的开发人员工具检查文件是否正确加载并观看预览(应显示给定字体的所有可用字符) .
2. 您的测试/本地系统上不能提供/安装所需的字体。
3. 如果您使用“字体生成器”(如 Font Squirrel 的)生成了字体文件，请重新执行该过程(因为文件可能已损坏)。如果这没有帮助，请尝试找到另一个源文件(在大多数情况下是字体的 TTF 文件)并使用它来生成其他格式。如果这仍然不能解决您的问题，请使用另一个“字体生成器”。

还要确保所有使用的字符都在字体文件的子集中。

如果您仍然遇到任何问题，请再次来到这里告诉我们。 ;-)

祝你好运，成功!