咨询电话:15632335515
当前位置: 主页 > 建站教程 >

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

发布时间:2018-12-21 15:41:04 作者:青锋建站
  图标字体文件使用非常方便,也加快了网站建设的速度和效率。同时在很多情况下实现图标字体跨域是非常方便的,可以制作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;

 
分享到:

相关文章MORE

最新发布MORE

  • 图标字体文件跨域访问不显示的解决方法_网站建设_青锋建站
  • Cross-Origin Resource Sharing协议介绍_网站建设_青锋建站
  • phpcms程序目录与网站根目录分离_网站建设_青锋建站
  • phpcms如何实现同时调用主页栏目页内容页标题_青锋建站
  • 如何在phpcms模板中直接使用php代码_网站建设_青锋建站
  • 网站建设   石家庄网络公司   网站建设教程   网络营销技巧   石家庄SEO   建站分站   PHP源码   网站案例   建站新闻   青锋工作室
  • 联系电话:15632335515   QQ:943703539
  • 联系地址:石家庄高新区汾河道69号
  • Copyright © 2016-2026 青锋建站 版权所有
  • 15632335515