问题:

虽然网页正常显示和运行,但是有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. C# foreach 中获取索引index的方法

    方法一: int i = 0; foreach (var item in arr) { i++; } 方法二: foreach (var item in arr) { int index = arr. ...

  2. poj2186--tarjan+缩点

    题目大意:       每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这 种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么牛A也 ...

  3. Hibernate 表映射 主键生成策略与复合主键

    主要分析三点: 一.数据表和Java类的映射 : 二.单一主键映射和主键的生成策略 : 三.复合主键的表映射 : 一.数据表和Java类的映射  Hibernate封装了数据库DDL语句,只需要将数据 ...

  4. php实现设计模式之 组合模式

    <?php /** * 组合模式 * * 将对象组合成树形结构以表示"部分-整体"的层次结构,使得客户对单个对象和复合对象的使用具有一致性 * * * 1) 抽象构件角色Co ...

  5. Css动画总结

    transform: transition: animation:

  6. 完美 全兼容 解决 文字两端对齐 justify 中文姓名对齐

    text-align:justify; 所有浏览器都支持,text-justify之类的却只有IE支持,就不要考虑了. justify我的理解,使元素内部的子元素两端对齐,子元素当然只能是inline ...

  7. NodeJS(node.exe, npm, express, live-server)安装

    1.下载node.exe 下载https://nodejs.org/en/download/current/ 创建D:\GreenSoftware\NodeJS目录,并将node.exe放到目录中. ...

  8. GoogleMap和高德地图最新的瓦片图地址是用什么加密或者压缩

    https://mts1.googleapis.com/vt?pb=!1m4!1m3!1i13!2i2475!3i3029!2m3!1e0!2sm!3i293208756!3m9!2sen-US!3s ...

  9. [SharePoint]SharePoint Claim base Authentication的一个比较好的介绍

    User identity in AD DS is based on a user account. For successful authentication, the user provides ...

  10. 常用API——字符串String型函数

    上图: 声明 var myString = new String(“Every good boy does fine.”); var myString = “Every good boy does f ...