站长回忆录博客最近更换的主题上用的很多图标是矢量图标（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字体文件导致的网站页面图片无法显示的问题