CSS字體樣式復合圖,簡稱字體圖標,是一種使用CSS代碼來構建圖標的方法,它可以代替傳統的圖片圖標,具有更優秀的性能和可維護性。
/* 引入字體文件 */ @font-face { font-family: 'iconfont'; /* 自定義字體名稱 */ src: url('iconfont.woff'); /* 字體文件路徑 */ /* 其他字體格式和路徑,用逗號隔開 */ } /* 將字體圖標編碼轉換成字符集 */ @charset "UTF-8"; /* 定義字體圖標 */ .iconfont { font-family: 'iconfont'; /* 自定義字體名稱 */ font-size: 24px; /* 字體大小 */ font-style: normal; /* 字體風格 */ -webkit-font-smoothing: antialiased; /* 抗鋸齒,增強字體清晰度 */ -moz-osx-font-smoothing: grayscale; /* Mac OS X 上的抗鋸齒 */ } /* 使用字體圖標 */ .icon-home::before { content: "\E001"; /* 字符編碼 */ } .icon-user::before { content: "\E002"; /* 字符編碼 */ }
通過上述代碼,我們可以使用<i class="iconfont icon-home"></i>
來創建一個“家”圖標,并使用<i class="iconfont icon-user"></i>
來創建一個“用戶”圖標。
字體圖標的優點是可以隨時更改圖標顏色、大小等屬性,而不必重新制作一張圖片,同時也節省了HTTP請求和圖像資源的大小,提高了頁面性能。
下一篇css字體怎么超粗