在網頁設計中，選擇合適的字體不僅能夠增加頁面的美觀度，還能提高讀者的閱讀體驗。CSS提供了多種方法來實現字體的選擇與設置，其中一種常見的方法是使用font-family屬性。

下面是一個示例代碼，演示了如何使用 CSS 繪制一個簡單的字體選擇界面：

<style>
/* 設置字體樣式 */
.font {
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}
/* 定義字體選擇框 */
.font-selector {
border: 1px solid #ccc;
padding: 10px;
width: 200px;
}
</style>
<div class="font">
<h2>CSS 字體選擇界面</h2>
<div class="font-selector">
<label>請選擇字體樣式：</label>
<select name="font" id="font">
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="sans-serif">sans-serif</option>
<option value="Georgia">Georgia</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Couries New</option>
<option value="Verdana">Verdana</option>
</select>
</div>
</div>

上述代碼中，.font類定義了頁面的文本樣式，包括默認的字體樣式和字號大小。接下來，我們使用.font-selector類來定義字體選擇框的外觀，其中包括了邊框、內邊距和寬度等 CSS 屬性。在 HTML 中，我們使用<select>標簽來創建一個下拉菜單，并設置每個選項的value屬性，以便在 CSS 中引用。

當用戶選擇一個選項后，CSS 將根據該選項的值設置文本的字體樣式。例如，如果用戶選擇了“Helvetica”，則頁面上顯示的文本將以 Helvetica 字體顯示。

以上就是使用 CSS 創建字體選擇界面的簡單示例代碼。雖然本例中只演示了如何使用字體選擇框，但是通過類似的方法，我們可以使用 CSS 實現更多的字體樣式設置，以便為網站提供更好的用戶體驗。