CSS作為前端樣式表編排工具的一部分，在實現頁面排版效果的同時還提供了引入圖標的功能，其中包括引入一些矢量圖標或TTF字體文件，下面我們就來講解一下CSS如何引用TTF圖標。

首先，我們需要將TTF字體文件保存到工程目錄下的某個文件夾中，在CSS文件中使用@font-face聲明語句定義字體名稱、字體格式等相關信息，并引入字體，如下所示：

@font-face {
font-family: 'iconfont';
src: url('iconfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

其中，font-family是自定義的字體名稱；src是字體文件的路徑和格式說明，其中有多種格式（比如：woff2、woff、eot、svg等），truetype（TrueType字體格式）是其中一種常用格式；font-weight和font-style則用來指定字體的粗細和風格。

接下來，我們就可以在HTML標簽中使用定義好的字體了，例如：

.icon {
font-family: 'iconfont';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-weight: normal;
line-height: 1;
text-transform: none;
letter-spacing: 0;
word-wrap: normal;
white-space: nowrap;
display: inline-block;
text-align: center;
font-size: 14px;
}

我們可以看到，在該CSS class中，使用了font-family屬性指定使用之前聲明好的“iconfont”字體，并利用其他屬性指定相關樣式，例如，設置字體屬性以及文本對齊方式等。

最后，在HTML中定義的i標簽中使用之前生成的圖標類名即可，例如：

<i class="icon icon-user"></i>

其中，class屬性的值為定義好的CSS class，這里使用的是“icon”樣式類，后面跟上了圖標類名（“icon-user”），即可在頁面中顯示指定的圖標。