CSS 字體族屬性解析：font-family 和 font-size

CSS 字體族屬性解析：font-family 和font-size

在網頁設計中，字體的選擇和大小是非常重要的，它們直接影響到網頁的可讀性和整體風格。 CSS 提供了豐富的字體屬性，其中最常使用的包括 font-family 和 font-size。

1. font-family 屬性

font-family 用來指定字體的名稱或字體族的優先順序。例如，我們可以使用以下方式設定字體：

p {
  font-family: Arial, Helvetica, sans-serif;
}

這個範例中，首先會嘗試使用Arial 字體，如果Arial 字體不可用，則嘗試使用Helvetica 字體，最後如果Helvetica 字體也不可用，那麼會使用預設的sans-serif 字體。這種字體族的設定方式非常實用，因為不同的裝置上可能沒有相同的字體。

在CSS 中，font-family 也可以指定一個包含多個字體名稱的列表，如下：

h1 {
  font-family: "Times New Roman", Times, serif;
}

在這個例子中，如果使用者的裝置上沒有Times New Roman 字體，則會嘗試使用Times 字體，而如果Times 字體也不可用，就會使用預設的serif 字體。

此外，還有一些通用的字體族可以在不同作業系統和瀏覽器中使用，例如 sans-serif、serif、monospace、cursive 和 fantasy。

2. font-size 屬性

font-size 用來指定字體的大小。常見的單位包括像素（px）、百分比（%）和 em。

h2 {
  font-size: 24px;
}

在這個範例中，h2 元素的字體大小被設定為 24 像素。

另外，我們也可以使用百分比單位來指定字體大小，例如：

h3 {
  font-size: 120%;
}

在這個例子中，h3 元素的字體大小為父元素字體大小的 120%。

最後，也可以使用 em 單位來指定字體大小，em 單位是相對於元素本身的字體大小計算的。例如：

p {
  font-size: 1.2em;
}

在這個範例中，p 元素的字體大小為父元素字體大小的 1.2 倍。

總結

在網頁設計中，正確選擇合適的字體和大小是非常重要的。透過 font-family 屬性可以設定字體的優先順序，以確保在不同裝置上都能有良好的顯示效果。而 font-size 屬性則用於調整字體的大小，可以使用像素、百分比和 em 單位來指定。透過合理使用這兩個屬性，可以讓網頁的字體更加美觀易讀。

以上是CSS 字體族屬性解析：font-family 和 font-size的詳細內容。更多資訊請關注PHP中文網其他相關文章！