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

简介:

问题:

 

虽然网页正常显示和运行,但是有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





本文转自叶超Luka博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/p/5928243.html,如需转载请自行联系原作者
目录
相关文章
|
XML 资源调度 JavaScript
使用 svg-sprite-loader、svgo-loader 优化 svg symbols
使用 svg-sprite-loader、svgo-loader 优化 svg symbols
312 0
解决IIS Web部署 svg/woff/woff2字体找不到问题
最近项目中用到了fontawesome-webfont.svg等字体。部署项目后,发现没有<,+等符号,字体也不对,发现浏览器总是报找不到woff、woff2字体的错误。
305 0
解决IIS Web部署 svg/woff/woff2字体找不到问题
webfont.woff2和webfont.woff下载超时报404错误
webfont.woff2和webfont.woff下载超时报404错误
179 0
webfont.woff2和webfont.woff下载超时报404错误
|
Web App开发 前端开发 JavaScript
rem / Vender Prefix / CSS extensions
rem / Vender Prefix / CSS extensions
rem / Vender Prefix / CSS extensions
|
Linux 数据安全/隐私保护 开发者
TTF、TOF、WOFF 和 WOFF2 的相关概念
在上一篇文章中,我引入了 TTF 格式的字体文件来解决各平台字体表现不统一的问题。
575 0
TTF、TOF、WOFF 和 WOFF2 的相关概念
Microsoft BuleHat 2018 Videos and Slides
https://www.youtube.com/watch?v=jxve5hrtwnI&feature=youtu.
1870 0
|
JavaScript 前端开发