CSS如何設置字體樣式

# CSS如何設置字體樣式

在網頁設計中，字體樣式的設置直接影響頁面的可讀性和視覺體驗。CSS（層疊樣式表）提供了豐富的屬性來控制字體樣式，本文將詳細介紹常用的字體樣式設置方法。

## 1. 設置字體族（font-family）

`font-family`屬性用于定義文本的字體?？梢灾付ǘ鄠€字體作為備選，瀏覽器會優先使用第一個可用的字體。

```css
p {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

說明： - 字體名稱包含空格或特殊字符時需加引號 - 最后通常指定通用字體族（如sans-serif、serif等）

2. 設置字體大?。╢ont-size）

控制文字尺寸的常用屬性：

h1 {
  font-size: 24px;  /* 固定像素值 */
}

body {
  font-size: 16px;  /* 基準大小 */
}

.small {
  font-size: 0.875em;  /* 相對父元素大小 */
}

.large {
  font-size: 1.5rem; /* 相對根元素(html)大小 */
}

推薦：響應式設計建議使用rem或em單位

3. 設置字體粗細（font-weight）

控制文字粗細程度：

.bold {
  font-weight: 700;  /* 等同于bold */
}

.light {
  font-weight: 300;
}

.normal {
  font-weight: normal;  /* 400 */
}

4. 設置字體樣式（font-style）

控制斜體顯示：

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

.normal {
  font-style: normal;
}

5. 設置行高（line-height）

影響文本行間距的重要屬性：

p {
  line-height: 1.6;  /* 無單位值，表示字體大小的倍數 */
}

article {
  line-height: 24px;  /* 固定值 */
}

6. 字體顏色（color）

設置文本顏色：

.text-red {
  color: #ff0000;
}

.text-blue {
  color: rgb(0, 0, 255);
}

.text-theme {
  color: var(--primary-color);  /* 使用CSS變量 */
}

7. 文本裝飾（text-decoration）

控制下劃線等裝飾效果：

a {
  text-decoration: none;  /* 去除鏈接下劃線 */
}

.underline {
  text-decoration: underline wavy red;  /* 波浪下劃線 */
}

8. 字體簡寫屬性（font）

組合多個字體屬性：

.heading {
  font: italic 700 24px/1.2 "Microsoft YaHei", sans-serif;
}

順序：font-style → font-weight → font-size/line-height → font-family

最佳實踐建議

1. 優先使用系統默認字體保證加載速度
2. 網頁正文通常16px起，行高建議1.5-1.8倍
3. 使用CSS變量管理主題字體樣式
4. 移動端考慮使用-webkit-text-size-adjust防止自動縮放

通過合理組合這些屬性，可以創建出既美觀又易讀的網頁排版效果。 “`

注：本文約650字，涵蓋了CSS字體樣式的主要設置方法，采用Markdown格式，包含代碼示例和實用建議?？筛鶕枰{整具體內容或添加更多示例。