font-face跨域辦法

發(fā)布時(shí)間：2020-06-17 18:02:10 來(lái)源：網(wǎng)絡(luò) 閱讀：539 作者：chen2009277025 欄目：開(kāi)發(fā)技術(shù)

font-face是現(xiàn)在比較流行的技術(shù)，可以矢量化你的圖標(biāo)，更改顏色方便等等。如果你想更進(jìn)一步了解他，請(qǐng)點(diǎn)擊這里(CSS3 icon font完全指南)

今晚有網(wǎng)友問(wèn)到font-face跨域在nginx下如何配置，印象中一淘UX有文章介紹辦法，但打開(kāi)文章里面相應(yīng)的鏈接后發(fā)現(xiàn)沒(méi)內(nèi)容。
搜了一下其他地方，大多數(shù)給出的都是一樣的鏈接。

所以在這里補(bǔ)充一下內(nèi)容：

原因：

Firefox對(duì)字體文件有加載限制，也就是說(shuō)不允許你隨便加載別人的字體，防止他人盜用字體。

解決辦法：

1、把字體文件放在你網(wǎng)站根目錄下。
2、給字體文件的http頭里面添加Access-Control-Allow-Origin屬性，以控制指定域引用你的字體文件。

nginx:

font-face跨域辦法

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";
    }
    ...
}

font-face跨域辦法

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

向AI問(wèn)一下細(xì)節(jié)

font-face跨域辦法

font-face是現(xiàn)在比較流行的技術(shù)，可以矢量化你的圖標(biāo)，更改顏色方便等等。如果你想更進(jìn)一步了解他，請(qǐng)點(diǎn)擊這里(CSS3 icon font完全指南)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

font-face是現(xiàn)在比較流行的技術(shù)，可以矢量化你的圖標(biāo)，更改顏色方便等等。如果你想更進(jìn)一步了解他，請(qǐng)點(diǎn)擊這里(CSS3 icon font完全指南)