ngnix提示fonts/fontawesome-webfont.woff?v=4.2.0 404问题解决方法

问题：

/fonts/fontawesome-webfont.woff?v=4.2.0 => generated 557 bytes in 857 msecs (HTTP/1.1 404) 2 headers in 87 bytes (1 switches on core 0)

ngnix提示fonts/fontawesome-webfont.woff?v=4.2.0 404问题解决方法，当然这个不仅仅是ngnix会有出现这个问题，IIS，apache都会出现这个问题，这个问题不是致命的，但是不解决也很头疼。

提示字体没有找到文件404.就是fonts/fontawesome-webfont.woff2?v=4.3.0 404，这个.woff是在font-awesome.css文件中引用的，很多朋友用了bootstrap也会包含这个woff，虽然不影响使用，但是对于强迫症的我来说一定要找到，于是网上各种解决办法，最后找到问题的所在。

@font-face {

font-family: 'FontAwesome';

src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');

src: url('../fonts/fontawesome-webfont.eot?#iefixv=4.2.0') format('embedded-opentype');

src: url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff');

scr: url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype');

src: url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');

font-weight: normal;

font-style: normal;

}

解决方案：

1、项目发布过程中这个文件没有被拷贝到发布目录，在项目grunt build时会进行文件的copy操作，其中对文件后缀做了限制，所以只需要加上这个.woff2即可；

2、由于web服务器不支持导致的（我这次是因为这个原因导致的）：

nginx不支持的情况，可以参考下面的配置解决，加到自己站点conf文件中：

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的，所以要设置一下，好像跟nginx一样的，这个我没试过哦：

location ~* .(eot|otf|ttf|woff|woff2|svg)$ {

add_header Access-Control-Allow-Origin *;

}

IIS默认也是不支持的，可以添加MIME类型来解决：

.woff application/font-woff

.woff2 application/x-font-woff2

很赞哦！(10)