问题:

虽然网页正常显示和运行,但是有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. CSS3 过渡特性创建信封效果的联系表单

    最近给大家分享 CSS3 效果比较多,都是充分运用了 CSS3 来实现的.通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享使用 CSS3 过渡特性实现的信 ...

  2. Windows Azure Cloud Service (1) 用户手册

    <Windows Azure Platform 系列文章目录> 下载地址 Cloud Service用户手册

  3. C#深入.NET平台的软件系统分层开发

    今天我们来讲讲分层开发,你从标题能不能简单的认识一下什么是分层呢? 不懂也没关系,接下来我来给你讲讲. 第一章 软件系统的分层开发 (1)其实分层模式可以这样定义:将解决方案中功能不同的模块分到不同的 ...

  4. c# 打开指定的网址

    System.Diagnostics.Process.Start(url);

  5. 基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码

    在Web开发的时候,我们很多时候,需要引用很多CSS文件.JS文件,随着使用更多的插件或者独立样式文件,可能我们的Web界面代码会越来越臃肿,看起来也很累赘,在MVC里面提供了一个Bundle的对象, ...

  6. 一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)

    JSONP(JSON with Padding)可以看成是JSON的一种“使用模式”,用以解决“跨域访问”的问题,这篇简单的文章给出一个简单的例子用于模拟如何通过jQuery以JSONP的访问调用一个 ...

  7. C#编程总结(十)字符转码

    C#编程总结(十)字符转码 为了适应某种特殊需要,字符需要根据规则进行转码,便于传输.展现以及其他操作等. 看看下面的转码,就知道他的用处了. 1.字符串转码 根据原编码格式与目标编码格式,完成转换. ...

  8. jquery内容选择器(匹配内容不为空的元素)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. ArrayList和LinkedList的区别

    简单的说,ArrayList是顺序存储,而LinkedList是链式存储.

  10. Firemonkey TComboBox 下拉菜单字型修改方法 (D10)

    在 FMX 下的 TComboBox 下拉菜单字型修改有二种方法: uses FMX.Pickers; 使用 Style,需先设定好 Style 后,再指定预设项的 Style,方法如下: proce ...