這一陣子做了一些資料調整,把原本的Dropbox的連結轉至自家的主機,
不過在使用font-awesome時發現到不能正常載入圖示,變成了框框…
用Chrome F12除錯,發現下列問題:
Access to Font at ‘https://AAA.XXX/font/fonts/fontawesome-webfont.woff2?v=4.7.0’ from origin ‘http://blog.BBB.XXX’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://blog.BBB.XXX” is therefore not allowed access.
問題字型路徑是正確的可以下載,CSS也是可以被閱讀的,所以路徑問題排除
看來是CORS跨來源 HTTP的問題,Server to Server 上無法引用或使用特別的檔案
Web Server是用blogger的,之前引用沒問題,所以來查一下rel目的的設定哪裡需要設定?
架設環境為 apache server 2.2 OR 2.4
再爬了一下文,發現apache上使用font-awesome會出問題的並不少,
看起來少了一個檔『.htaccess』,在目錄下建立這個檔後,把以下資訊加入即可
AddType application/vnd.ms-fontobject eot AddType font/truetype ttf AddType application/x-font-woff woff
原先以為是https無法互連http的問題,或者是路徑上無法對應(相對路徑),
最後是因為apache少了對上列檔案格式的支援,所以在.htaccess上加入後改善
以上,請參考指教!