问题:

虽然网页正常显示和运行,但是有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. customErrors与错误页面

    本配置节相对简单而且常用 <customErrors defaultRedirect="url" mode="On|Off|RemoteOnly"> ...

  2. 火狐浏览器与Chorme的兼容性小问题

    1.如果 result 返回时空字符串, 则在 火狐里面 回调函数不会进入执行. 如果是 谷歌浏览器,则会 执行回调. $.post(, ipagesize: , strSearchKey: strk ...

  3. dobbo zookeeper 认识

    dubbo 主要使用来整合各种协议的服务,服务提供者可以向dubbo平台注册服务,服务消费都可以看到所有服务的详细信息,而已可以调用所提供的服务接口.zookeeper:主是要服务的集群,配置管理(如 ...

  4. 微信JSApi支付~坑和如何填坑

    返回目录 微信一直用着不爽,这几天研究它的jsapi支付,即在微信内打开H5页面,完成支付的过程,在这个过程中,你将会遇到各种各样的问题,而大叔将把这些问题的解决方法写一下,希望可以给你带来帮助! 一 ...

  5. JSTL中的fmt标签小例子

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  6. 最短路径之Floyd算法

    Floyd算法又称弗洛伊德算法,也叫做Floyd's algorithm,Roy–Warshall algorithm,Roy–Floyd algorithm, WFI algorithm. Floy ...

  7. 基于highcharts封装的组件-demo&源码

    前段时间做的项目中需要用到highcharts绘制各种图表,其实绘制图表本身代码很简单,但是由于需求很多,有大量的图形需要绘制,所以就不得不复制粘贴大量重复(默认配置等等)的代码,所以,后来抽空自己基 ...

  8. 纯前端JSON文件编辑器[0]

    准备工作 参考资料: FileReader(用来获取上传文件的数据) <download>(用来设置下载文件的名称) Blob(用来存储数据的一个容器) createObjectURL(用 ...

  9. ABAP使用OLE2对象创建EXCEL文件

    厌倦了总是下载一模一样的EXCEL文档?没有颜色,边框,有效性验证.... 让我们看看怎样用OLE2对象来创造可爱的EXCEL工作表吧!(效果如下) 首先你需要知道微软EXCEL中的不同部分的名称,每 ...

  10. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q139-Q141)

    Question 139You create a SharePoint solution that contains two Features named Feature1 and Feature2. ...