当前位置: 芃睿知识网 > 建站常见问题

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?#iefix&v=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 

看了该文章的用户还看了

发表高见 (请对您的言行负责)
©芃睿知识网 版权所有2021-2022 www.shsongjiang.com