CSS 字體(例如font-awesome)，使用子域名之后不能正確顯示

animabear 發(fā)布于2019-07-24 10:32 / 1442人閱讀

摘要：癥狀原來能正常顯示的情況下，將圖片文件改為子域名訪問，方便加速。切換之后一切正常，但是的圖片沒有正確顯示，全部顯示框框原因因?yàn)闉g覽器的安全規(guī)則，雖然是子域名，但是跨域載入字體文件的時(shí)候被瀏覽器攔截，導(dǎo)致了顯示不正常。解決以為例，修改或者

癥狀

原來能正常顯示的情況下，將js、css、圖片文件改為子域名訪問，方便cdn加速。切換之后一切正常，但是font-awesome的圖片沒有正確顯示，全部顯示框框

原因

因?yàn)闉g覽器的安全規(guī)則，雖然是子域名，但是css跨域載入字體文件的時(shí)候被瀏覽器攔截，導(dǎo)致了顯示不正常。

解決

以apache為例，修改.htaccess或者 httpd.conf


# Make sure proxies don’t deliver the wrong content
Header append Vary User-Agent env=!dont-vary
  
    Header set Access-Control-Allow-Origin "*"

GPU云服務(wù)器云服務(wù)器字體效果不能顯示創(chuàng)建子域名添加子域名子域名查詢

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/35777.html

相關(guān)文章

CSS 字體(例如font-awesome)，使用子域名之后不能正確顯示

摘要：癥狀原來能正常顯示的情況下，將圖片文件改為子域名訪問，方便加速。切換之后一切正常，但是的圖片沒有正確顯示，全部顯示框框原因因?yàn)闉g覽器的安全規(guī)則，雖然是子域名，但是跨域載入字體文件的時(shí)候被瀏覽器攔截，導(dǎo)致了顯示不正常。解決以為例，修改或者癥狀原來能正常顯示的情況下，將js、css、圖片文件改為子域名訪問，方便cdn加速。切換之后一切正常，但是font-awesome的圖片沒有正確顯示...

vboy1010 2019-08-29 11:14 評論0 收藏0
FontAwesome 圖標(biāo)字體庫的使用

摘要：和元素廣泛用于圖標(biāo)。可以直接對圖標(biāo)的屬性進(jìn)行更改，如圖標(biāo)的顏色大小，并且可以組合不同的圖標(biāo)形成所需的圖標(biāo)等。執(zhí)行以上步驟，若是沒有圖標(biāo)顯示，可以打開，檢查字體庫，即引入文件的路徑是否正確。在前端開發(fā)中，許多新手常會(huì)遇見一個(gè)問題，參考的網(wǎng)頁上有類似下圖的圖標(biāo)，但在資源里卻找不到對應(yīng)的文件，這是因?yàn)檫@些網(wǎng)頁使用了圖標(biāo)庫。這里介紹一種常見的圖標(biāo)庫——FontAwesome的使用。 1.登錄Fon...

zsirfs 2019-04-23 11:43 評論0 收藏0
CSS進(jìn)階篇--fontAwesome代替網(wǎng)頁icon小圖標(biāo)

摘要：網(wǎng)頁小圖標(biāo)到處可見，如果一個(gè)網(wǎng)頁都是干巴巴的文字和圖片，而沒有小圖標(biāo)，會(huì)顯得非常簡陋。直接看代碼鏈接鏈接鏈接鏈接得出的結(jié)果就是其他應(yīng)用還有其他更加復(fù)雜一點(diǎn)的應(yīng)用，包括固定寬度浮動(dòng)反轉(zhuǎn)旋轉(zhuǎn)疊加圖標(biāo)等。引言奧森圖標(biāo)（Font Awesome）提供豐富的矢量字體圖標(biāo)—通過CSS可以任意控制所有圖標(biāo)的大小，顏色，陰影。網(wǎng)頁小圖標(biāo)到處可見，如果一個(gè)網(wǎng)頁都是干巴巴的文字和圖片，而沒有小圖標(biāo)...

paney129 2019-08-28 18:18 評論0 收藏0
關(guān)于yo+gulp+bower一起構(gòu)建應(yīng)用時(shí)遇到的一些問題總結(jié)

摘要：問題一在中配置開發(fā)測試時(shí)用得庫，無法在運(yùn)行時(shí)注入。解決辦法分如下幾步，在自己的里直接將變量重寫，指向正確的相對位置即可。問題一、在bower中配置開發(fā)測試時(shí)用得庫，無法在運(yùn)行時(shí)注入。首先是打算有一些測試時(shí)候用到的庫，放到bower.json文件的devDependencies里面，但是運(yùn)行之后怎么也找不到對應(yīng)的文件，也就是gulp無法進(jìn)行注入，而加到正式的庫里面就能找到解決辦法參看了...

cnsworder 2019-08-21 10:44 評論0 收藏0
前端基礎(chǔ)入門二（CSS）

摘要：輸入的時(shí)候少按一個(gè)鍵瀏覽器兼容問題比如使用的選擇器命名，在是無效的能良好區(qū)分變量命名變量命名是用不要純數(shù)字中文等命名，盡量使用英文字母來表示。選擇器和類選擇器最大的不同在于使用次數(shù)上。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。回顧上一節(jié)HTML 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

Lorry_Lu 2019-08-30 15:55 評論0 收藏0