其实以前也有出现过类似的问题,但是第二次来查看的时候又没有报错,其实问题主要是在于域名访问上的问题,当我在一级域名mulingyuer.com访问时就会出现跨域,原因是因为php转换后的css文件链接是二级域名下的www.mulingyuer.com,为此,即便是css引用的是本地的字体文件还是会提示跨域的问题,为此我查了下,发现后端就有很方便的解决办法。

首先我是根据我自己的运行环境写的这篇博文,使用宝塔面板,使用阿帕奇,这里就简单说下解决方法:

首先我们要确定阿帕奇已经开启了mod_headers模块,具体方法直接在宝塔里找到配置--然后ctrl+f 搜索:LoadModule headers_module modules/mod_headers.so;如果能搜到有一段前面没有加#号的,那么就表示开启了,你只需要在配置的最末尾,添加这段代码即可:

<FilesMatch "\.(ttf|otf|eot|woff|svg|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

保存后再去刷新网页,问题解决。

如果是nginx,可以尝试在配置里添加这段:

location ~* \.(eot|ttf|woff|svg|otf)$ {
      add_header Access-Control-Allow-Origin *或域名;
      add_header Access-Control-Allow-Headers X-Requested-With;
      add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}

我没有这个环境,这个代码可以自行测试一下,如果成功可以在下面留言,方便其他人确定是否适用。

分类: 教程 标签: 字体跨域

评论

全部评论 6

  1. 约P加我
    约P加我
    QQ Browser Android Pie
    哥哥来玩嘛
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @约P加我你的头像出卖了你
      1. 约P加我
        约P加我
        QQ Browser Android Pie
        @木灵鱼儿哦 谢特:duocang:
        1. 木灵鱼儿
          木灵鱼儿
          FireFox Windows 10
          @约P加我:chigua:下次换个色情点的头像再来回复
  2. 小仙女
    小仙女
    QQ Browser iPhone
    我是一只小仙女
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @小仙女你怎么穿品如的衣服

目录