@FontFace在firefox中不起作用

Question

所以我有这个@fontFace规则

@font-face {
    font-family: 'myriadPro-Black';
    src: url("fonts/myriadPro-BlackCond.otf") format("opentype");
}

它可以在Chrome和Safari上运行，但不能在Firefox上运行。我知道Firefox对fontface有不同于其他浏览器的规则，但我很难理解。习惯于跨浏览器优化。

知道我哪里做错了吗？

Answer 1

支持范围更广的多扩展：

我是如何使用在线生成器来生成我的字体规则的。它节省了很多时间，因为它把所有东西都写得井井有条。此外，它还确保您支持各种不同的扩展。

可以在这里找到这样一个生成器的示例：

火狐的安全问题：

FireFox已经保护了@font-face。例如，Firefox可能会抛出301错误，指出您没有访问字体文件的权限，因此无法加载该文件，而其他浏览器则没有。

您可以使用.htaccess或任何配置文件为您使用的but服务器授予正确的权限，但由于我使用各种but服务器，这很烦人。对我来说最有效的方法是将字体文件放在与.css文件相同的目录中。

所以我有一个外部fonts.css文件，其中包含字体目录中的所有css字体行。然后我可以在页面上包含这个.css文件，我想使用这种字体。确保你没有创建额外的目录，这样你就可以在没有anny目录的情况下调用字体。在您的示例中，将字体文件放在css目录中，并将代码更改为：

@font-face { font-family：'myriadPro-Black'；src: url("myriadPro-BlackCond.otf") format("opentype")；}

更多信息：