IIS渲染内嵌字体图标异常，请求技术协助

问题现象 #

• 通过IIS访问静态网页时，内嵌在CSS中的字体图标显示为乱码字符
• 直接用浏览器打开本地网页文件时，字体图标渲染正常
• 排查发现：通过IIS获取的CSS文件内容出现编码错乱，而本地原始CSS文件内容显示正常

核心原因 #

IIS未正确配置CSS文件的编码格式或MIME类型，导致字体图标对应的字符编码在传输过程中被破坏，无法被浏览器正确解析。

解决步骤 #

1. 统一CSS文件编码 #

确保本地CSS文件保存为UTF-8无BOM格式（可通过VS Code、Notepad++等编辑器设置），避免编码不一致问题。

2. 配置IIS的CSS内容编码头 #

• 打开IIS管理器，右键目标站点 → 属性 → 切换到HTTP头标签
• 点击「添加」，新增自定义HTTP头：
  • 名称：Content-Type
  • 值：text/css; charset=utf-8

3. 检查并添加CSS的MIME类型 #

• 在IIS管理器中，选中站点后双击MIME类型
• 若列表中无.css项，点击「添加」：
  • 扩展名：.css
  • MIME类型：text/css

4. 配置字体文件的MIME类型（若涉及独立字体文件） #

如果字体图标依赖独立字体文件（如.woff/.woff2/.ttf等），需补充对应MIME类型：

• .woff → application/font-woff
• .woff2 → font/woff2
• .ttf → application/x-font-ttf
• .eot → application/vnd.ms-fontobject

5. 重置IIS生效 #

打开管理员权限的命令提示符，执行：

iisreset

6. 验证修复效果 #

清除浏览器缓存（快捷键Ctrl+Shift+Delete），重新通过IIS访问网页，确认字体图标显示正常。

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