解决跨域调用woff字体文件导致的网站页面图片无法显示的问题

Internet luzhiwei 407364℃ 0评论

站长回忆录博客最近更换的主题上用的很多图标是矢量图标(Font Awesome),Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。官网上有详细的介绍,这里不多解释:Font Awesome官网

Font Awesome的资源文件是一种woff格式的文件,Web开放字体格式(Web Open Font Format,简称WOFF)是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由万维网联盟的Web字体工作小组标准化,以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小,并且不包含加密也不受DRM(数位著作权管理)限制。这种格式的文件在当前网站下加载是没有问题的。

为了提升博客上图片的加载速度,站长回忆录博客也上线了七牛云存储的CDN加速功能。但是在把Font Awesome的WOFF格式的资源文件托管在七牛云存储上之后,博客页面上缺无法显示,显示为“方框”,如下图所示:

通过Firebug查看错误日志如下:

Access to Font at ‘http://cdn.luzhiwei.com/wp-content/themes/yusi1.0/fonts/fontawesome-webfont.woff?v=4.1.0’ from origin ‘http://luzhiwei.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://luzhiwei.com’ is therefore not allowed access.

Access to Font at ‘http://cdn.luzhiwei.com/wp-content/themes/yusi1.0/fonts/fontawesome-webfont.ttf?v=4.1.0’ from origin ‘http://luzhiwei.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://luzhiwei.com’ is therefore not allowed access.

这其实是 Access-Control-Allow-Origin 站点跨域请求的问题。解决方案如下:

1. 如果服务器用的是Apache,在Apache的配置文件httpd.conf中加入代码

<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
<FilesMatch “\.(cur|gif|ico|woff|eot|ttf|jpe?g|png|svgz?|webp)$”>
SetEnvIf Origin “:” IS_CORS
Header set Access-Control-Allow-Origin “*” env=IS_CORS
</FilesMatch>
</IfModule>
</IfModule>

2.如果服务用的是Nginx,在配置文件nginx.conf中

http {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}

配置保存之后,重启服务器软件。然后Ctrl+F5刷新页面即可看到页面上的矢量图标。

 

PS:顺便推荐一下七牛云存储,免费注册即可获得10G的下载流量,做个人博客足够了。注册免费领取CDN流量入口。

转载请注明:站长回忆录 » 解决跨域调用woff字体文件导致的网站页面图片无法显示的问题

喜欢 (9)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址