当前位置: 知识网 > 建站问题

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

知识网2021年11月06日 20:29原创

问题:

/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都会出现这个问题,这个问题不是致命的,但是不解决也很头疼。

wenfont404

提示字体没有找到文件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

很赞哦!(9)

发表高见 (请对您的言行负责)

©芃睿知识网 版权所有 2012-2022 www.shsongjiang.com

备案号:赣ICP备2022001527号-1