最近一個(gè)項(xiàng)目，css,js等靜態(tài)資源做了cdn部署，瀏覽網(wǎng)站時(shí)發(fā)現(xiàn)font awesome字體圖標(biāo)通通不能正常顯示。只有一些奇怪的符號。瀏覽器控制臺報(bào)錯(cuò)信息：font-face引用字體跨域。

使用CDN后字體圖片不顯示問題

1. 查看字體文件路徑，跟URL路徑是相同的HTTPS，而且都是相同的二級域名，這就奇怪了，怎么會報(bào)錯(cuò)字體跨域呢。

跨域：當(dāng)一個(gè)資源從與該資源本身所在的服務(wù)器不同的域或端口請求一個(gè)資源時(shí)，資源會發(fā)起一個(gè)跨域 HTTP 請求。

2.  突然想起css做了cdn部署，而字體css文件的文件格式.eot、.woff、.woff2沒有加入cdn，cdn緩存配置中加入。

3. 強(qiáng)制刷新網(wǎng)頁后，發(fā)現(xiàn)還是不行，但是控制臺報(bào)錯(cuò)信息變了。提示字體文件不存在，復(fù)制字體文件也無法打開。

IIS中字體文件不存在問題

瀏覽器中字體文件無法打開，但是服務(wù)器中文件真實(shí)存在。原因是服務(wù)器不支持該文件。應(yīng)該加入MIME類型。

IIS添加MIME類型

.woff2 application/x-font-woff

 nginx

location ~* \.(eot|otf|ttf|woff|woff2|svg)$ {
add_header Access-Control-Allow-Origin *;
}
AddType application/x-font-woff woff
AddType application/x-font-woff2 woff2

Apache

location ~* \.(eot|otf|ttf|woff|woff2|svg)$ {
add_header Access-Control-Allow-Origin *;
}
AddType application/x-font-woff woff
AddType application/x-font-woff2 woff2

到此這篇關(guān)于引用字體時(shí)圖標(biāo)無法顯示_字體文件不存在問題的文章就介紹到這了,更多相關(guān)字體圖標(biāo)無法顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論