图标字体文件跨域访问不显示的解决方法_网站建设

发布时间:2018-12-21 15:36:46 来源:青锋建站 作者:青锋建站
  图标字体文件使用非常方便,也加快了网站建设的速度和效率。同时在很多情况下实现图标字体跨域是非常方便的,可以制作JS、CSS、字体文件CDN,方便多个域名来调用。但是在进行字体文件跨域时需要进行一定的设置,不然就会出现图标字体文件跨域访问不显示的情况。以下是青锋建站-专业的网站建设公司给大家提供的apache和nginx下图标字体文件跨域访问不显示的解决方法。

apache下实现图标字体跨域

  首先编辑httpd.conf找到这行
#LoadModule headers_module modules/mod_headers.so
把#注释符去掉 ,目的是开启apache头信息自定义模块
  在Apache服务器中,将下面一行添加到服务器的配置中(在相应的<Directory>,<Location>,<Files>或<VirtualHost>部分中)。 配置通常位于.conf文件中(httpd.conf和apache.conf是这些文件的通用名称),或者位于.htaccess文件中。
Header set Access-Control-Allow-Origin 'origin-list'
对于Nginx,设置此http头的命令是:
add_header 'Access-Control-Allow-Origin' 'origin-list'

nginx下实现图标字体跨域

  @font-face是CSS3中的一个特性,可以把自己定义的Web字体嵌入到网页中,随着@font-face,越来越多的网页采用字体图标作为网页中的小图形。
  比如Bootstrap就采用了Glyphicons 字体图标 在Bootstrap的架构下可以免费使用Glyphicons的250多种图标字体。另外一个比较常用的开源图标字体就是Font Awesome了,内含几百种各种size的图标文件,可以很容易实现Fixed Width,Animated Icons,Rotated,Flipped,Stacked等特性,跟能和Bootstrap无缝配合。悦合同就是使用Font Awesome作为字体图标。
  由于网站的资源文件使用的是另外的域名(这样做是便于浏览器在加载时可以提高加载效率,关于domain hash也就是多域名来加速访问的问题有空再说),这样主域名和资源的域名尤其是字体文件,就形成跨域访问,在主域名的网站无法加载资源域名中的字体。
  处理这种跨域,只要设置Access-Control-Allow-Origin,允许目标域名访问就可以了,Access-Control-Allow-Origin是HTML5新增的一个特性,在资源类的域名下做如下配置(nginx的配置,apache相似处理)​
location ~ .*.(eot|ttf|ttc|otf|eot|woff|woff2|svg)(.*) {
    add_header Access-Control-Allow-Origin http://www.yourdomain.com;

 
分享到:

Copyright © 2016-2026 青锋建站 版权所有