問題描述

我把在iconfont.cn上下載的圖標(biāo)代碼放到應(yīng)用上時(shí)，發(fā)現(xiàn)有的圖標(biāo)顯示正常，有的圖標(biāo)剛開始顯示正常，切換到另一個(gè)頁面的時(shí)候就開始異常了，顯示成了另一個(gè)圖標(biāo)的樣子。我檢查了圖標(biāo)的class，發(fā)現(xiàn)也沒有沖突，而且樣式寫在了<style scope></style>里面，按理說也不會被其他的樣式影響。
最后發(fā)現(xiàn)，在這個(gè)頁面里面有一個(gè)組件A，組件A里面也引用了一個(gè)其他的iconfont，雖然兩個(gè)圖標(biāo)的class不同，但是他們class里面的content是相同的。

/* 首頁的樣式 */
.icon-start::before {
  content: '\e602'
}
/* 組件的樣式 */
.icon-up::before {
  content: '\e602'
}

即使他們使用了各自的iconfont樣式，但是他們的iconfont樣式都引用了相同的font-family

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

而兩個(gè)頁面都定義了同樣名為"iconfont"的字體，后出現(xiàn)的字體就把前面的字體定義覆蓋了

@font-face {
  font-family: "iconfont"; 
  src: url('iconfont.ttf?t=1645424918035') format('truetype');
}

解決

這時(shí)我們只需要將兩個(gè)文件的font-family名字修改為不同名字就可以了
參考：iconfont 字體生成原理及使用技巧