icon-font在同一站点多域名下无法正常显示

问题描述:

站点环境:linode主机,nginx,wordpress搭建,有org , com ,net ,cn域名。wordpress站点域名设置的是org域名。

问题:org域名下首页的字体icon正常显示,其它域名下无法显示,火狐下显示为特殊符号,IE下显示空白。

原因推测:

  1. 代码问题,@font-face设置错误。
  2. wordpress域名设置不合理。
  3. 网络问题。

分析过程:

  1. 使用Firebug查看源代码,未发现错误,url和format均正确。由于使用的是成熟的付费主题,应该没有错误。
  2. 在com域名下,使用FX开发人员工具、Firebug、Chrome开发人员工具查看computed css值,与org域名下无异。将wp域名设置修改为com域名,问题仍然存在。
  3. 引用的font文件在linode主机本地,网络正常。
  4. google没有搜到符合的页面。
  5. 偶然用IE的开发人员工具查看,控制台报CSS3117错误,查询MSDN描述如下:

    <table align="left" border="1" height="78" width="642">
        <tbody>
            <tr>
                <td>
    
                        CSS3117
    
                </td>
                <td>
    
                        &quot;@font-face 跨源请求失败。资源访问受限。&quot;
    
                </td>
                <td>
    
                        &quot;Access-Control-Allow-Origin&quot; 标头可能未正确配置或者字体主机可能不允许你的页面使用该字体。
    
                </td>
                <td>
    
                        请确保正确的权限并且正确配置对处理字体的主机具有跨域访问源的 HTTP 响应标头。
    
                </td>
            </tr>
        </tbody>
    </table>
    

故而原因在跨域名请求。在请求不同域下的资源的请求头中没有 Access-Control-Allow-Origin 字段时,FX会直接禁止该资源的请求,控制台也没有发出警报。解决方法是在header中添加该字段。

解决方案:

修改nginx.conf,增加如下配置

`location ~ \.(ttf|otf|eot|woff)$

{

add_header Access-Control-Allow-Origin *;

}`

**应该注意的是,使用 * 号是不安全的。**

同源策略

IE和Firefox在处理@font-face引入的web fonts时遵从同源策略

同源策略规定:不同域的客户端脚本在没明确授权的情况下,不能读写对方的资源。所谓同源,遵从以下策略:




































站    点



是否同域



原    因



https://www.foo.com



不同域



协议不同,https与http是不同的协议



http://xeyeteam.foo.com



不同域



域名不同,xeyeteam子域与www子域不同



http://foo.com



不同域



域名不同,顶级域与www子域不是一个概念



http://www.foo.com:8080



不同域



端口不同,8080与默认的80端口不同



http://www.foo.com/a/



同域



满足同协议、同域名、同端口,只是这里多了一个目录而已