IE11及以下版本Bebas字体加载失败问题求助

首先，你遇到的CSS3114: @font-face failed OpenType embedding permission check错误，本质是IE11对OpenType（OTF）字体的嵌入权限校验非常严格——你的BebasNeue Regular.otf字体文件本身没有被授予“可嵌入”的权限，IE会直接拒绝加载这类字体，而其他现代浏览器对权限的限制没这么苛刻，所以能正常显示。

结合你的情况，给你几个可行的解决方案：

方案1：修复字体的嵌入权限 #

这个是从根源解决问题的方法：

• 使用字体编辑工具（比如FontCreator，或者免费的命令行工具otfinfo）修改字体的嵌入权限，将其设置为Installable Embedding（可安装嵌入）。
• 注意：修改字体权限前，请务必确认你拥有该字体的授权许可，避免版权问题。

方案2：针对IE11优化字体格式兼容 #

IE11对OTF的支持本来就不好，加上权限问题，更稳妥的做法是补充IE支持的EOT格式，并调整@font-face的加载优先级：

1. 把你现有的BebasNeue Regular.ttf转换成EOT格式（可以用FontSquirrel字体生成器或在线转换工具完成），放到字体文件夹中。
2. 调整你的CSS代码，让IE优先加载EOT，现代浏览器加载TTF/OTF：

   @import url('https://fonts.googleapis.com/css?family=Roboto'); 
   @font-face { 
     font-family: Bebas; 
     /* IE 9-11专属的EOT加载 */
     src: url("{% static 'publicnfx/fonts/BebasNeue Regular.eot' %}");
     src: url("{% static 'publicnfx/fonts/BebasNeue Regular.eot?#iefix' %}") format('embedded-opentype'),
          /* 现代浏览器加载TTF和OTF */
          url("{% static 'publicnfx/fonts/BebasNeue Regular.ttf' %}") format('truetype'),
          url("{% static 'publicnfx/fonts/BebasNeue Regular.otf' %}") format('opentype'); 
   }
   

方案3：临时简化方案（快速生效） #

如果你暂时不想处理格式转换或权限修改，可以直接移除OTF的引用，只保留TTF格式——IE11对TTF的支持比OTF稳定得多，而且其他浏览器也能正常加载TTF：

@import url('https://fonts.googleapis.com/css?family=Roboto'); 
@font-face { 
  font-family: Bebas; 
  src: url("{% static 'publicnfx/fonts/BebasNeue Regular.ttf' %}") format('truetype'); 
}

为什么你之前试的方案没用？ #

你之前添加了woff、svg等格式的引用，但你的字体文件夹里并没有这些文件，而且核心问题是OTF的权限校验失败，不是格式不全，所以那些修改无法解决问题。

内容的提问来源于stack exchange，提问作者Max Loyd