快捷搜索:   服务器  PHP  安全  IIS  linux 安全

CSS字体@font-face跨域调用(例如font-awesome)使用子域名之后不能正确显示的解决办法

在原来能正常显示的情况下,因为启动了CDN因此将js、css、图片文件改到子域名访问,以便cdn加速。但是切换后,二级域名使用font-awesome的图片无法正确显示,全部显示框框



这是因为浏览器的安全规则,虽然是子域名,但是css跨域载入字体文件的时候被浏览器拦截,导致了显示不正常。


Firefox对字体文件有加载限制,也就是说不允许你随便加载别人的字体,防止他人盗用字体。

解决办法:

1、把字体文件放在你网站根目录下。

2、给字体文件的http头里面添加Access-Control-Allow-Origin属性,以控制指定域引用你的字体文件。

nginx:


server {
    ...
    # Fix @font-face cross-domain restriction in Firefox
    location ~* \.(ttf|ttc|otf|eot|woff|font.css)$ {
        add_header Access-Control-Allow-Origin "http://yoursite.com";
    }
    ...
}


apache:

<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://yoursite.com"
  </IfModule>
</FilesMatch>

 3、添加mine

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff woff


顶(0)
踩(0)

您可能还会对下面的文章感兴趣:

最新评论