加上cdn後字型跨域

2022-08-01 20:45:13 字數 1187 閱讀 4648

@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)(.*)

配置完後,例牌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)$)

關於字型跨域

寫在前面的話 跨域問題啊 字型跨域,居然碰到了 網上蒐羅來的答案,有機會的可以試試有沒有效 原文 css載入字型的跨域問題 載 剛才碰到乙個css載入字型跨域問題,記錄一下啊。站點的動態請求與靜態檔案請求是不同的網域名稱的。站點的網域名稱為 www.domain.com,而靜態檔案的網域名稱為 st...

apache css 跨域 css載入字型跨域問題

剛才碰到乙個css載入字型跨域問題,記錄一下。站點的動態請求與靜態檔案請求是不同的網域名稱的。站點的網域名稱為 www.domain.com,而靜態檔案的網域名稱為 st.domain.com。問題 頁面中載入css檔案 此css中呼叫了外部字型如下 font face font family fo...

避免跨域的CDN部署方案

我們的乙個專案採用動靜分離的部署方式,服務介面在自己的伺服器上,靜態資源儲存在oss,通過cdn訪問。不過這樣有時會有跨域問題。本文總結解決的辦法 原本的做法,服務介面部署在自己的伺服器上,通過網域名稱api.com訪問,不走cdn 靜態檔案,包括html,css,js,等,部署在oss上,通過網域...