在講述HTML CSS字體設置樣式前，我們先了解一下什么是字體。字體是指文字的形狀和樣式，它直接影響到文字的可讀性和美觀程度。在HTML中，我們使用CSS來設置字體的樣式。

CSS提供了很多屬性來設置字體樣式，如下：

font-family: 設置字體的名稱;
font-size: 設置字體的大小;
font-weight: 設置字體的粗細程度，如normal、bold;
font-style: 設置字體的風格，如italic、oblique；
font-variant: 設置字體的變體，如small-caps。

下面我們對上述屬性逐一進行講解：

font-family：設置字體的名稱，可以使用多個值，用逗號隔開，瀏覽器會按照所列出的字體順序依次進行匹配，直到匹配到可以渲染的字體。

body {
font-family: Arial, "Microsoft YaHei", sans-serif;
}

上述代碼中，我們先設置字體為Arial，如果設備上沒有安裝Arial字體，則匹配"Microsoft YaHei"字體，如果還是沒有安裝，則最終顯示sans-serif字體。

font-size：設置字體的大小，可以使用絕對長度（如px、pt）或相對長度（如em、rem）。

h1 {
font-size: 28px;
}
p {
font-size: 16px;
}

font-weight：設置字體的粗細程度，可以取normal、bold等值，也可以使用數值，如400、700。

h1 {
font-weight: bold;
}
p {
font-weight: 400;
}

font-style：設置字體的風格，可以取normal、italic、oblique等值。

em {
font-style: italic;
}

font-variant：設置字體的變體，可以取normal、small-caps等值。

p {
font-variant: small-caps;
}

綜上所述，我們可以根據需求設置不同的字體樣式，讓網頁更具有可讀性和美觀程度。