<style>
@font-face {
font-family: 'myfont';
src: url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
}
.icon {
font-family: 'myfont';
font-size: 20px;
font-style: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-arrow:before {
content: "\e600";
}
.icon-star:before {
content: "\e601";
}
</style>

CSS 自定義圖標(biāo)字體，是一種使用字體文件（通常是 .woff 或 .ttf 格式）作為圖標(biāo)的方法，與傳統(tǒng)的圖像文件相比，它更靈活、易于維護(hù)和修改。使用 CSS 自定義字體時，我們通常會遵循以下幾個步驟：

1. 創(chuàng)建字體文件（.woff 或 .ttf），并將字體圖標(biāo)制作為字體的某些字符。

2. 使用 @font-face 規(guī)則將字體文件加載到頁面中。

3. 使用 .icon 類或其他命名規(guī)則，為字體圖標(biāo)指定樣式，包括字體大小、字體粗細(xì)、顏色等。

4. 在 HTML 中使用標(biāo)簽及其偽元素來呈現(xiàn)相應(yīng)的字體圖標(biāo)。

例如，下面的代碼實現(xiàn)了箭頭和星星兩個圖標(biāo)的效果：

<i class="icon icon-arrow"></i>
<i class="icon icon-star"></i>

其中，.icon-arrow 和 .icon-star 類名指定了相應(yīng)圖標(biāo)的樣式，即字體為 myfont、大小為 20px、粗細(xì)為 normal 等。而:before 偽元素則指定了圖標(biāo)的字符代碼，用 CSS 語法表示。