Question

所以我有@fontFace规则

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

适用于Chrome和Safari，但不适用于Firefox。据我所知，Firefox对字体的规则与其他浏览器不同，但我很难理解。习惯于跨浏览器优化。

关于我做错的任何想法？

Answer 1

多次扩展以获得更广泛的支持：

我如何生成字体规则是使用在线生成器。它节省了大量时间，因为它按顺序编写了所有内容。此外，它确保您支持各种不同的扩展。

firefox的安全问题：

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

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

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

@ font-face { font-family：'myriadPro-Black'; src：url（“myriadPro-BlackCond.otf”）格式（“opentype”）; }