zoukankan      html  css  js  c++  java
  • CDN中,字体文件的跨域问题和解决

    @font-face是CSS3中的一个特性,可以把自己定义的Web字体嵌入到网页中,随着@font-face,越来越多的网页采用字体图标作为网页中的小图形。

    比如Bootstrap就采用了Glyphicons 字体图标 在Bootstrap的架构下可以免费使用Glyphicons的250多种图标字体。另外一个比较常用的开源图标字体就是Font Awesome了,内含几百种各种size的图标文件,可以很容易实现Fixed Width,Animated Icons,Rotated,Flipped,Stacked等特性,跟能和Bootstrap无缝配合。悦合同就是使用Font Awesome作为字体图标。

    当在配置CDN的时候,duang~~~

    字体跨域!!!!!!

    由于网站的资源文件使用的是另外的域名(这样做是便于浏览器在加载时可以提高加载效率,关于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;
    
    }



    配置完后,例牌reload配置,刷新CDN缓存,就ok了。

    这里说多一句,CDN会缓存当时的Response Header的,每次修改必须刷新CDN缓存,不然浏览器刷死也不会生效。​

    CDN配置cors允许跨域访问时注意事项:

    1.     目前不支持泛域名添加,如*.12345.com,仅支持域名精确匹配。

    2.     目前仅支持配置一条白名单域名。

    3.     若使用OSS产品作为源站,OSS与CDN平台同时配置Cors,CDN的配置将覆盖OSS。

    4.     若源站为自己的服务器或ECS产品,建议先进行动静分离,静态文件使用CDN加速,CDN控制台配置的Cors功能,仅对静态文件生效。

    Header set Access-Control-Allow-Origin "*"
    # nginx config
    if ($filename ~* ^.*?.(eot)|(ttf)|(woff)$){
        add_header Access-Control-Allow-Origin *;
    }
  • 相关阅读:
    DS博客作业04--图
    DS博客作业03--树
    DS博客作业02--栈和队列
    DS博客作业01--线性表
    c博客06-2019-结构体&文件
    C博客作业05--2019-指针
    图书馆查书、借书、还书
    DS博客作业05--查找
    DS博客作业04--图
    DS博客作业03--树
  • 原文地址:https://www.cnblogs.com/hnsongbiao/p/7449532.html
Copyright © 2011-2022 走看看