为什么CSS font-face无法正确渲染某些字体？

Question

我想使用@ font-face在我的网页中导入3种字体。但只有其中一个正确呈现。其他人无法展示，因为他们必须出现。为什么？ 这是我导入每个项目并使用它的示例代码：

@font-face {
  font-family: 'BMitra';
  src: url('fonts/BMitra.eot?#iefix') format('eot'),  
       url('fonts/BMitra.woff') format('woff'), 
       url('fonts/BMitra.ttf') format('truetype');
}
.my_div {
  font-family: 'BMitra';
  font-size: 10pt;
}

实际上我认为CSS可以找到字体，但它不能将它们显示为真实的外观。

这就是我现在所看到的：

这就是我必须看到的真实外观（我在本地加载此字体）：

Answer 1

Font-face是依赖于用户系统以及渲染客户端的东西。 在加载样式表的其余部分之前，浏览器不会等待先下载字体。

请参阅这些链接 -

http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems

你可以使用一些 css技巧或黑客攻击

http://css-tricks.com/snippets/css/using-font-face/

Internet Explorer 9，Firefox，Opera，Chrome和Safari中的所有主流浏览器都支持@ font-face规则。

但是，Internet Explorer 9仅支持.eot类型字体，而Firefox，Chrome，Safari和Opera支持.ttf和.otf类型字体。

注意： - Internet Explorer 8及更早版本，不支持@ font-face规则。 但是有很多规则，技巧和黑客可以让它在所有传统浏览器中运行..

请参阅上述链接以获取更多参考。

建议： - 作为用户界面分析师，我建议也使用全球推荐的字体（在所有浏览器中都支持）。如果你有这些要求，那么试着找一些替代方案。

谢谢!!

Answer 2

我能找到问题的原因 我复制到我的项目的字体文件有2个版本（有2个文件用于相同的字体）。一个用于正常体重，另一个用于粗体重。我只复制了普通文件，而我想以粗体显示它们。

我的字体目录：

相同字体的不同版本：

我替换了文件并解决了问题 谢谢大家对我的问题的关注。