除了前面介紹的背景外，字體設置也是網頁設計中的重要組成部分，合適的字體不僅會使頁面更加美觀，也可以提升用戶體驗。CSS 中提供了一系列用于設置文本字體樣式的屬性，比如更改字體，控制字體大小和粗細等等。
font-family：設置字體；
font-style：設置字體的風格，例如傾斜、斜體等；
font-weight：設置字體粗細；
font-size：設置字體尺寸；
font-variant：將小寫字母轉換為小型大寫字母；
font-stretch：對字體進行伸縮變形（使用較少，并且主流瀏覽器都不支持）；
font：字體屬性的縮寫，可以在一個聲明中設置多個字體屬性。
font-family 屬性用來設置元素內文本的字體。由于字體的種類成千上萬，而且有些還不是免費的，因此我們的電腦上幾乎不可能擁有所有的字體。為了最大程度的保證我們設置的字體能夠正常顯示，可以通過 font-family 屬性定義一個由若干字體名稱組成的列表，字體名稱之間使用逗號,分隔，瀏覽器會首先嘗試列表中的第一個字體，如果不支持則嘗試下一個，以此類推。
font-family 屬性的可選值如下：
下表中列舉了一些常用的字體族（generic-family）：
【示例】使用 font-family 屬性為 HTML 元素設置字體樣式：
運行結果如下圖所示：
注意：如果字體族或字體名稱中包含空格或多個單詞，則必須將它們使用引號包裹起來，例如"Times New Roman"、"Courier New"、"Segoe UI" 等，如果是在元素的 style 屬性中使用則必須使用單引號。
在網頁設計中最常用的字體族是 serif 和 sans-serif，因為它們適合閱讀。在顯示一些程序代碼是通常使用等寬字體，這樣可以使用程序代碼看起來更加工整。
font-style 屬性用來設置字體的樣式，例如斜體、傾斜等，該屬性的可選值如下：
【示例】使用 font-style 屬性設置字體的樣式：
運行結果如下圖所示：
乍看之下，您可能覺得 italic 和 oblique 的效果是一樣的。其實不然，italic 顯示的字體的斜體版本，而 oblique 則只是一個傾斜的普通字體。
font-weight 屬性能夠設置字體的粗細，可選值如下：
【示例】使用 font-weight 屬性設置字體粗細：
運行結果如下圖所示：
