本地加载Font Awesome时遭遇415 Unsupported Media Type错误求助

问题根源 #

错误是因为服务器未正确识别woff2等字体文件的MIME类型，导致请求字体文件时返回415不支持的媒体类型。

具体解决步骤 #

1. 确认文件路径正确性 #

先检查本地项目中font-awesome/fonts目录是否存在，且包含fontawesome-webfont.woff2等字体文件，确保CSS中引用的字体路径和实际文件位置匹配（CSS里的路径是相对CSS文件的../fonts/xxx，对应项目根目录下的font-awesome/fonts/xxx，只要解压完整就没问题）。

2. 配置服务器MIME类型 #

根据你使用的服务器类型，添加对应的字体文件MIME类型配置：

Apache服务器

在项目根目录的.htaccess文件中添加以下代码（没有就新建一个）：

AddType font/woff .woff
AddType font/woff2 .woff2
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf

Nginx服务器

在Nginx配置文件的server块中添加：

location ~* \.(woff|woff2|eot|ttf|otf)$ {
    types {
        font/woff woff;
        font/woff2 woff2;
        application/vnd.ms-fontobject eot;
        font/ttf ttf;
        font/otf otf;
    }
}

修改后重启Nginx服务。

IIS服务器

1. 打开IIS管理器，找到你的网站
2. 双击"MIME类型"
3. 点击"添加"，依次添加：
   • 扩展名：.woff，MIME类型：font/woff
   • 扩展名：.woff2，MIME类型：font/woff2
   • 扩展名：.eot，MIME类型：application/vnd.ms-fontobject
   • 扩展名：.ttf，MIME类型：font/ttf
   • 扩展名：.otf，MIME类型：font/otf

本地开发服务器（如VS Code的Live Server）

如果用Live Server，可在项目根目录新建.vscode/settings.json，添加以下配置：

{
    "liveServer.settings.mimeTypes": {
        ".woff": "font/woff",
        ".woff2": "font/woff2",
        ".eot": "application/vnd.ms-fontobject",
        ".ttf": "font/ttf",
        ".otf": "font/otf"
    }
}

重启Live Server即可生效。

3. 清除浏览器缓存 #

配置完成后，按Ctrl+Shift+R强制刷新页面，清除之前的缓存资源，确保新的配置生效。

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