所以我有@fontFace规则
@font-face {
font-family: 'myriadPro-Black';
src: url("fonts/myriadPro-BlackCond.otf") format("opentype");
}
适用于Chrome和Safari,但不适用于Firefox。据我所知,Firefox对字体的规则与其他浏览器不同,但我很难理解。习惯于跨浏览器优化。
关于我做错的任何想法?
答案 0 :(得分:0)
多次扩展以获得更广泛的支持:
我如何生成字体规则是使用在线生成器。 它节省了大量时间,因为它按顺序编写了所有内容。 此外,它确保您支持各种不同的扩展。
可在此处找到此类生成器的示例:http://www.fontsquirrel.com/tools/webfont-generator
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”); }
更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face