下面是一个示例代码，演示了如何使用 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 实现更多的字体样式设置，以便为网站提供更好的用户体验。