問題描述
我把在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 字體生成原理及使用技巧