SPFX本地Workbench在IE11中加载失败，报@font-face权限错误求助

我之前在本地开发SPFx Web部件时也碰到过这个IE11专属的坑，给你几个经过验证的解决思路和变通方案：

1. 升级Office UI Fabric相关依赖包（推荐根本解决） #

这个问题大多是因为旧版本的@microsoft/sp-office-ui-fabric-core包中的fabricmdl2icons-2.23.ttf字体没有设置正确的Installable嵌入权限，而IE11对这个权限检查特别严格。微软在后续版本中已经修复了这个问题，所以直接升级相关包就能解决：

• 运行命令升级核心包：

  npm install @microsoft/sp-office-ui-fabric-core@latest --save
  

• 如果你的项目还用到了其他Fabric组件（比如office-ui-fabric-react），建议同步升级到兼容版本，避免出现样式冲突。

2. 替换字体格式为WOFF（IE11友好） #

IE11原生支持WOFF格式的字体，而且WOFF的嵌入权限检查没有TTF严格。你可以手动替换项目中的字体引用：

1. 找到项目中引用该字体的CSS文件（通常在node_modules/@microsoft/sp-office-ui-fabric-core/dist/css/fabric.css或者你自定义的样式文件里）
2. 修改@font-face规则，将TTF替换为WOFF格式：

   @font-face {
     font-family: 'FabricMDL2Icons';
     src: url('../fonts/fabricmdl2icons-2.23.woff') format('woff');
     font-weight: normal;
     font-style: normal;
   }
   

3. 确保WOFF字体文件已经被复制到项目的dist/fonts目录，可以通过修改config/copy-assets.json添加字体复制规则：

   {
     "files": [
       {
         "source": "./node_modules/@microsoft/sp-office-ui-fabric-core/dist/fonts/",
         "destination": "./dist/fonts/"
       }
     ]
   }
   

   之后运行gulp copy-assets同步字体文件。

3. 本地开发临时变通（仅用于调试） #

如果只是需要临时在IE11中调试，可以尝试以下两种方式绕过权限检查：

• 添加信任站点：打开IE11的Internet选项 → 安全 → 本地Intranet → 站点，把你的SPFx本地调试地址（比如https://localhost:4321）添加进去，然后降低该区域的安全级别（比如把“下载未签名的ActiveX控件”设为“提示”）。
• 使用HTTPS调试：运行SPFx时加上HTTPS参数，IE11对HTTPS资源的权限限制会宽松一些：

  gulp serve --https --port 4321
  

4. 检查字体文件的嵌入权限（进阶） #

如果你必须使用旧版本的字体，可以用字体编辑工具（比如FontCreator）打开fabricmdl2icons-2.23.ttf，修改其嵌入权限为Installable，然后替换项目中的原字体文件。不过这个方法比较繁琐，不推荐作为长期方案。

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