font-face跨域辦法

font-face跨域辦法

font-face是如今比較流行的技術，能夠矢量化你的圖標，更改顏色方便等等。若是你想更進一步瞭解他，請點擊這裏(CSS3 icon font徹底指南)
今晚有網友問到font-face跨域在nginx下如何配置，印象中一淘UX有文章介紹辦法，但打開文章裏面相應的連接後發現沒內容。
搜了一下其餘地方，大多數給出的都是同樣的連接。

因此在這裏補充一下內容：

緣由：

Firefox對字體文件有加載限制，也就是說不容許你隨便加載別人的字體，防止他人盜用字體。

解決辦法：

一、把字體文件放在你網站根目錄下。
二、給字體文件的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>

 三、添加mine

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