IE11浏览器中@font-face引用服务器字体加载成功但不生效如何解决

这个问题是IE11加载自定义字体的典型兼容问题，本地字体文件可正常渲染、网络面板显示字体资源返回200加载完成但页面仍显示默认字体，按以下优先级逐一排查修复即可：

• 检查服务器返回的字体资源MIME类型
  IE对字体资源的MIME校验逻辑远严格于Chrome、Firefox等现代浏览器，只要MIME类型不匹配，即使资源完整下载到本地也不会被渲染引擎识别，不同字体格式对应的正确MIME如下：
  • .eot：application/vnd.ms-fontobject
  • .woff：application/font-woff
  • .woff2：font/woff2
  • .ttf：font/ttf
  • .otf：font/otf
    不要把字体资源的MIME配置为application/octet-stream、text/plain这类通用类型，IIS可直接在站点MIME类型配置中添加对应映射，Nginx、Apache可在站点配置的类型规则中补全上述对应关系。
• 检查跨域资源配置
  只要CSS文件和字体文件不同源（包括域名不同、端口不同、HTTP/HTTPS协议不一致），IE11就会对字体资源做跨域权限校验，必须给字体资源返回正确的CORS响应头：
  • 配置Access-Control-Allow-Origin响应头，值填写站点实际域名，不要直接用通配符*，IE11对通配符跨域头的兼容存在已知问题
  • 如果站点启用了Windows身份验证，需要单独给字体资源开匿名访问权限，否则IE带身份凭证发起跨域请求时会被拦截，导致字体加载后不生效
• 修正@font-face的兼容写法
  IE11对@font-face的src属性解析顺序有要求，需要把eot格式放在最前面，否则可能出现解析失败，兼容写法参考：

  @font-face {
    font-family: 'CustomFontName';
    src: url('custom-font.eot?#iefix') format('embedded-opentype'); /* 适配IE解析逻辑，?#iefix用于修复旧版本IE的参数解析bug */
    src: url('custom-font.woff2') format('woff2'),
         url('custom-font.woff') format('woff'),
         url('custom-font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  

  注意不要给自定义字体起和系统内置字体同名的font-family名称，否则IE会优先加载系统本地字体，覆盖服务器加载的自定义字体。
• 检查字体文件本身的嵌入权限标记
  IE会严格校验TTF、OTF等格式字体的fsType嵌入许可标记，如果字体文件被标记为“禁止嵌入”，即使资源加载完成，IE也会拒绝渲染该字体。可以用FontForge这类字体编辑工具打开字体文件，将嵌入权限修改为“允许嵌入”后重新导出上传即可。
• 清理IE缓存与安全设置拦截
  打开IE的Internet选项，将测试站点加入受信任站点或本地Intranet站点列表，关闭该区域的“保护模式”，再清除IE的字体缓存（本地缓存路径为%localappdata%\Microsoft\Windows\FontCache），重启浏览器后重新测试即可，部分场景是旧的错误字体缓存导致新资源不生效。

快速定位技巧：打开F12开发者工具切换到控制台面板，查看是否有CSS3111、CSS3117类字体相关报错：CSS3117基本对应MIME类型错误或跨域配置问题，CSS3111基本对应字体文件损坏、嵌入权限不足问题。

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