zoukankan      html  css  js  c++  java
  • font-face跨域办法

    font-face是现在比较流行的技术,可以矢量化你的图标,更改颜色方便等等。如果你想更进一步了解他,请点击这里(CSS3 icon font完全指南)
    今晚有网友问到font-face跨域在nginx下如何配置,印象中一淘UX有文章介绍办法,但打开文章里面相应的链接后发现没内容。
    搜了一下其他地方,大多数给出的都是一样的链接。

    所以在这里补充一下内容:

    原因:

    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
  • 相关阅读:
    sping AOP核心思想及实现原理
    springmvc RequestMappingHandlerMapping初始化详解
    springmvc RequestMappingHandlerAdapter初始化详解
    POJ 3169 Layout
    POJ 3264
    POJ 3461 Oulipo
    二分图判定 POJ-2492
    最小生成树 prim算法
    初级BFS
    哈夫曼建树
  • 原文地址:https://www.cnblogs.com/zzbo/p/3546737.html
Copyright © 2011-2022 走看看