相信很多码农朋友会遇到这个问题,今天记录一下,给自己做一个笔记,同时也分享给遇到类似问题的朋友,当你网站开发好后发布到正式环境或者从一个服务器搬到另外一个服务器时,访问网站,你发现你用到的“Font-Awesome”的字体图标都不会显示了,然后看到以下报错:
downloadable font: rejected by sanitizer (font-family:"FontAwesome"style:normal weight:normal stretch:normal src index:1) source:http://xxx.xxx.xxx/theme/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3
或者是:downloadable font: rejected by sanitizer (font-family: "Cryv2" style:normal weight:normal stretch:normal src index:0) source: http://xxx.xxx.xxx/template/css/fonts/new-fonts-ttf/CryUncial/Cryv2.ttf @ http://xxx.xxx.xxx/template/css/embeddedFontDeclarations.css
遇到这个问题我先是分析是不是换了服务器字体引用样式错了,结果发现引用的地址完全没有问题,再分析发现浏览器控制台里有“@font-face 跨源请求失败。资源访问受限”的错误提示,出现该错误的原因是浏览器的同源策略机制导致。要解决的是使用跨域资源共享(CORS)机制,允许服务器声明哪些源站有权限访问哪些资源。说明一下我使用的是环境是CentOs 7,Web服务器是Nginx,所以我们需要对Nginx进行一下跨域允许访问字体资源的配置。
在nginx的配置文件下新增:
location ~* \.(ttf|ttc|otf|eot|woff|woff2|font.css)$
{
add_header Access-Control-Allow-Origin *;
}
然后:service nginx restart重启Nginx服务,问题解决。
注意:上面的这段配置一定要自己手动输入,这样就能保证与服务器上的配置文件的编码一致,复制过去有可能会出错。Nginx启动不了。
#Font-Awesome字体跨域问题
#downloadable font: rejected by sanitizer