CSS字體圖標(biāo)是一種使用字體文件來顯示圖標(biāo)的技術(shù)，它允許開發(fā)者像使用文字一樣使用圖標(biāo)。然而在實(shí)際應(yīng)用中，如果字體文件不在當(dāng)前域名下，就會(huì)出現(xiàn)跨域問題。

@font-face {
font-family: 'myfont';
src: url('http://otherdomain.com/myfont.ttf');
}

在上面的示例中，字體文件存放在另一個(gè)域名下，那么在加載頁(yè)面時(shí)，就會(huì)出現(xiàn)以下錯(cuò)誤：

Font from origin 'http://otherdomain.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource...

這是因?yàn)闉g覽器會(huì)默認(rèn)限制跨域資源的加載。為了解決這個(gè)問題，我們需要在字體文件所在的服務(wù)器上添加一個(gè)Access-Control-Allow-Origin頭。

Access-Control-Allow-Origin: *

上述代碼表示允許任何站點(diǎn)的請(qǐng)求都可以獲取該字體文件。

如果你沒有權(quán)限去修改字體服務(wù)器的配置，還有一種解決方法：使用數(shù)據(jù)URI。

@font-face {
font-family: 'myfont';
src: url('data:application/x-font-ttf;base64,xxxxx') format('truetype');
}

這種方式可以將字體文件轉(zhuǎn)化為Base64編碼的數(shù)據(jù)，不需要使用外部鏈接，因此就避免了跨域問題。

總之，在使用CSS字體圖標(biāo)的時(shí)候，一定要注意跨域問題，避免出現(xiàn)加載不出圖標(biāo)的情況。