问题:
![图片[1]-问题&解决 fonts/fontawesome-webfont.woff2 404 (Not Found)-七木云](https://pengnaiming.nos-eastchina1.126.net/%E7%B4%A0%E6%9D%90%E4%B8%8B%E8%BD%BD/WP%E7%AC%94%E8%AE%B0%E7%B4%A0%E6%9D%90/468-%E9%97%AE%E9%A2%98%26%E8%A7%A3%E5%86%B3%20fonts%20fontawesome-webfont.woff2%20404%20(Not%20Found)/1.png)
虽然网页正常显示和运行,但是有2个字体文件出现404错误。像笔者这种强迫症是接受不了的。
解决:
因为笔者的服务器是虚拟主机,只需要在主机控制器平台添加对应的MIME类型即可。
![图片[2]-问题&解决 fonts/fontawesome-webfont.woff2 404 (Not Found)-七木云](https://pengnaiming.nos-eastchina1.126.net/%E7%B4%A0%E6%9D%90%E4%B8%8B%E8%BD%BD/WP%E7%AC%94%E8%AE%B0%E7%B4%A0%E6%9D%90/468-%E9%97%AE%E9%A2%98%26%E8%A7%A3%E5%86%B3%20fonts%20fontawesome-webfont.woff2%20404%20(Not%20Found)/2.png)
这样服务器就支持这两种字体文件,不会报错了。
参考的解决方案文章全文如下:
来源: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 woff2Apache默认是不支持.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 woff2IIS默认也是不支持的,可以添加MIME类型来解决:
.woff2 application/x-font-woff
感谢您的来访,获取更多精彩文章请收藏本站。
© 版权声明
THE END











暂无评论内容