问题:

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

【问题及解决】fonts/fontawesome-webfont.woff2 404 (Not Found)的更多相关文章

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

    问题: 虽然网页正常显示和运行,但是有2个字体文件出现404错误.像笔者这种强迫症是接受不了的. 解决: 因为笔者的服务器是虚拟主机,只需要在主机控制器平台添加对应的MIME类型即可. 这样服务器就支 ...

  2. 解决angular2页面刷新后报404错误

    如果你的angular项目部署到一个tomcat容器里面,localhost:8080是JavaWeb的主页,localhost:8080/driver/login是你angular2项目的登陆地址. ...

  3. 解决WordPress访问中文标签出现404的几个方法

    最近很多主题用户提到安装完WordPress后中文标签出现404的情况,出现这种情况一般修改固定链接设置是没有效果的,多数是windows主机带来的麻烦.网上多数人说要修改核心文件class-wp.p ...

  4. 解决网站出现GET .woff 404 (Not Found)的问题

    网站发布到IIS后,发现网站使用的Bootstrap框架所引用的woff字体无法正常显示. 于是跟踪http请求,对woff字体请求出现GET .woff 404 (Not Found)的问题,但是项 ...

  5. 彻底解决ASP.NET MVC 3 404错误码返回302的问题

    转自:http://blog.csdn.net/mycloudke/article/details/9746333 404状态码:,意味着当在页面上显示用户点击不存在,提高用户体验度,搜索引擎会放弃这 ...

  6. 解决fonts.gstatic.com无法访问

    最近很多google的服务又在大陆地区受限了,原因不做过多讨论.屏蔽这些服务不仅仅意味着gmail,谷歌学术等方便的工具使用受到限制,更意味着很多寄托于google的web服务无法使用.wordpre ...

  7. 解决Web部署 woff字体 404错误

    问题:刚刚在IIS上部署web项目的时候,发现浏览器总是报找不到woff字体的错误.导致浏览器加载字体报404错误. 原因:因为服务器IIS不认WOFF这个文件类型,只要在IIS上添加MIME 类型即 ...

  8. Vue项目发布的问题--http://localhost:8088/static/fonts/fontawesome-webfont.af7ae50.woff2

    问题:ngnix将8080转成80对外访问,找不对woff2等文件 一\ 搭建环境 ngnix-->conf中 server { listen 80; server_name 10.9.240. ...

  9. 解决Angular2 (SystemJS) XHR error (404 Not Found) loading traceur

    初学Angular2,跟着Angular2中文网学到HTTP这一节时出现了一个异常: GET http://localhost:3000/traceur 404 (Not Found) Error: ...

随机推荐

  1. nodejs支持ssi实现include shtml页面

    express 对于include的代码默认不处理,直接输出,没办法执行include的内容,但可以通过Nginx实现. 1. 配置nginx设置开启ssi模式. server { … ssi on; ...

  2. [C] C语言中的布尔值

    C不具备显示的布尔类型,所以使用整数来代替,规则是:零是假,任何非零值皆为真. 反过来说,如果逻辑表达式为真其值一定为真,若逻辑表达式为假其值一定为零.

  3. 也来玩玩 javascript对象深拷贝,浅拷贝

    经常看到讨论c#深拷贝,浅拷贝的博客,最近js写的比较多, 所以也来玩玩js的对象拷贝. 下面是维基百科对深浅拷贝的解释: 浅拷贝 One method of copying an object is ...

  4. 寻找Fragment的替代品的尝试

    自从Android在3.0推出Fragment之后,现在很多应用的设计都是建立在Fragment的基础上,像是多个tab切换这种需求,就可以使用Fragment,并且Fragment提供了一系列生命周 ...

  5. js观察者模式学习

    function Events(){ var obj = {}; this.on=function(key,fn){ var stack; stack = obj[key] || (obj[key] ...

  6. 使用CSS3对链接颜色与下划线进行优化

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. [锋利的JQ]-超链接提示效果

    关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...

  8. 使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  9. WinForm 多窗体操作

    1多窗体操作:确定哪个是主窗体 通过窗体进入其他窗体 代码如下 Form2 f2 = new Form2();//f2窗体实例化出来 f2.Show();//进入f2窗体 this.Hide();// ...

  10. .NET invoke NetSuite Restlet

    Please indicate the source if you need to repost. Restlet allows programmers to use the http request ...