CSS入門-Day3：文字與字體樣式

更新於 2024/08/07發佈於 2024/07/16閱讀時間約 5 分鐘

文字屬性

字體大小（font-size）

設置文本的大小，可以使用絕對大小（如 px、pt）或相對大小（如 em、rem、百分比）。

p {
  font-size: 16px;
}

h1 {
  font-size: 2em;
}

字體顏色（color）

設置文本的顏色，可以使用顏色名稱、十六進制值、RGB 或 HSL 值。

p {
  color: #333;
}

h1 {
  color: rgb(255, 0, 0);
}

字體系列（font-family）

設置文本的字體，可以指定多個字體名稱，瀏覽器會從左到右依次查找。

body {
  font-family: 'Arial', sans-serif;
}

字體樣式（font-style）

設置文本的樣式，如普通、斜體等。

p {
  font-style: italic;
}

字體粗細（font-weight）

設置文本的粗細，如正常、加粗等。

p {
  font-weight: bold;
}

文本對齊

文本對齊（text-align）

設置文本在容器內的水平對齊方式。

p {
  text-align: left;  /* 左對齊 */
}

h1 {
  text-align: center;  /* 居中對齊 */
}

div {
  text-align: right;  /* 右對齊 */
}

行高（line-height）

設置文本行之間的距離。

p {
  line-height: 1.5;  /* 行高為字體大小的 1.5 倍 */
}

文字間距（letter-spacing）

設置文本中字符之間的間距。

p {
  letter-spacing: 2px;
}

單詞間距（word-spacing）

設置文本中單詞之間的間距。

p {
  word-spacing: 5px;
}

文本裝飾（text-decoration）

設置文本的裝飾，如下劃線、上劃線等。

p {
  text-decoration: underline;  /* 下劃線 */
}

h1 {
  text-decoration: line-through;  /* 刪除線 */
}

Google 字體

引入 Google 字體

可以通過在 HTML 文件的 <head> 部分添加 <link> 標籤來引入 Google 字體。

<head>
  <link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">
</head>

使用 Google 字體

引入字體後，可以在 CSS 中使用 font-family 屬性來應用這些字體。

body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;  /* 使用粗體 */
}

示例

這裡是一個完整的示例，展示如何使用 Google 字體和文本屬性。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 文字屬性示例</title>
  <link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      color: #333;
      line-height: 1.5;
    }
    h1 {
      font-size: 2em;
      text-align: center;
      text-decoration: underline;
      font-weight: 700;
    }
    p {
      font-size: 16px;
      text-align: justify;
      letter-spacing: 1px;
      word-spacing: 2px;
    }
  </style>
</head>
<body>
  <h1>這是一個標題</h1>
  <p>這是一段文本，展示了如何使用 CSS 文字屬性來控制文本的顯示效果。我們使用了 Google 字體、字體大小、字體顏色、行高、文本對齊、文字間距和單詞間距等屬性。</p>
</body>
</html>