Question

我遇到了一个非常奇怪的错误。我已经设置了自定义font-face：

@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

如果未加载所需的字体，您可以检查以下几点：

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

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

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

祝你好运并取得成功！

Answer 2

问题是＆＃34; 更大胆＆＃34;和＆＃34; 打火机＆＃34;声明。不知怎的，@ font-face对那些字体权重声明并不好。

我正在玩耍，试图弄清楚为什么我的常规字体一直都是粗体。字体 - 面部声明的顺序也有所不同，但它仍然表现得很奇怪。

然后我更换了＆＃34;更大胆的＆＃34;带有＃34; 900＆＃34;的声明，突然一切都按原样运作。

我还没有找到任何其他博客谈论这个问题。此问题发生在Firefox，Chrome和至少IE11中。

虽然IE11似乎并不适合打造更轻松的＆＃34;言。

所以可以肯定的是，只需使用数字（100到900）或粗体。不是更大胆或更轻盈

使用font-weight normal时，firefox上的font-face会导致麻烦

2 个答案: