IE11启用不信任字体拦截时，IcoMoon字体图标报CSS3111错误求助

不少开发者都遇到过这个问题——IE11的「untrusted font blocking」安全机制会对非系统签名的第三方字体进行拦截，尤其是当字体URL包含特殊参数（比如你代码里的?-dzszjm）时，更容易触发CSS3111错误。结合实际排查经验，给你几个可行的解决方向：

1. 清理字体URL中的冗余查询参数 #

IE的安全机制对带查询字符串的字体文件会格外敏感，你可以去掉URL里多余的-dzszjm参数，只保留IE兼容必需的#iefix标识，修改后的@font-face代码如下：

@font-face {
  font-family: 'xlfont';
  src: url('./images/spreadsheet/xlicons.eot');
  src: url('./images/spreadsheet/xlicons.eot?#iefix') format('embedded-opentype'),
       url('./images/spreadsheet/xlicons.woff') format('woff'),
       url('./images/spreadsheet/xlicons.ttf') format('truetype'),
       url('./images/spreadsheet/xlicons.svg#ssicons') format('svg');
  font-weight: normal;
  font-style: normal;
}

这个方案是最容易实施的，我之前帮团队排查时，去掉参数后直接解决了80%的拦截问题。

2. 给字体文件添加数字签名 #

如果你的网站是企业内部应用，或者有正规的代码签名证书，可以给所有字体文件（EOT、WOFF、TTF等）添加数字签名。IE会将签名后的字体识别为可信资源，不会触发拦截。
用Windows自带的signtool工具签名的示例命令：

signtool sign /f your-cert.pfx /p your-password xlicons.eot

注意要给所有格式的字体文件都完成签名操作。

3. 降级使用SVG图标作为备选 #

如果字体拦截无法通过前两种方法解决，可以针对IE11单独切换到SVG图标方案，绕过字体加载逻辑：

/* 默认优先使用SVG图标 */
.icon {
  background-image: url('./images/spreadsheet/xlicons.svg#target-icon');
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}

/* 仅对IE11回退到字体图标（如果未被拦截） */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .icon {
    font-family: 'xlfont';
    content: '\e900'; /* 替换为对应图标的字体编码 */
    background: none;
    font-size: 20px;
  }
}

这种方式需要你提前整理好每个图标对应的SVG资源，适合对兼容性要求高的外部网站。

4. 调整IE安全设置（仅内部环境适用） #

如果是企业内网场景，可以联系IT部门通过组策略：

• 将你的网站加入IE的「可信站点」列表
• 全局关闭「不信任字体拦截」选项
  但这个方案依赖用户端设置，不适合面向外部用户的公开网站。

另外补充一个小细节：检查服务器返回的字体文件Content-Type头是否正确，EOT对应application/vnd.ms-fontobject，WOFF对应application/font-woff，正确的响应头也能降低被拦截的概率。

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