问题&解决fonts/fontawesome-webfont.woff2 404 (Not Found)

Posted 2020-08-12

问题：

 

虽然网页正常显示和运行，但是有2个字体文件出现404错误。像笔者这种强迫症是接受不了的。

 

解决：

因为笔者的服务器是虚拟主机，只需要在主机控制器平台添加对应的MIME类型即可。

这样服务器就支持这两种字体文件，不会报错了。

 

参考的解决方案文章全文如下：

来源：http://www.yneit.com/2016/06/fontsfontawesome-webfont-woff2-404-not-found.html

第一次使用FontAwesome加载字体，但是使用的时候却提示fonts/fontawesome-webfont.woff2 404 (Not Found)，很明显这是由于文件不存在导致的问题。然后我们具体来看一下：

可能存在两种情况：
1、项目发布过程中这个文件没有被拷贝到发布目录，我这次碰到的问题就是这个原因导致的，在项目grunt build时会进行文件的copy操作，其中对文件后缀做了限制，所以我只需要加上这个.woff2即可；

2、由于web服务器不支持导致的：
nginx不支持的情况，可以参考下面的配置解决：

location ~* \\.(eot|otf|ttf|woff|woff2|svg)$ {
add_header Access-Control-Allow-Origin *;
}
 
AddType application/x-font-woff woff
AddType application/x-font-woff2 woff2

Apache默认是不支持.woff和.woff2的，所以要设置一下：

location ~* \\.(eot|otf|ttf|woff|woff2|svg)$ {
add_header Access-Control-Allow-Origin *;
}
 
AddType application/x-font-woff woff
AddType application/x-font-woff2 woff2

IIS默认也是不支持的，可以添加MIME类型来解决：

.woff2 application/x-font-woff