字體和文本樣式

字體和文本樣式

CSS 提供了多種屬性來控制網頁上的字體和文本樣式，這些屬性讓開發者可以調整字體的外觀、大小、顏色、間距和其他文本相關的效果，以提升網頁的可讀性和視覺吸引力。

1. 字體系列（font-family）

font-family 屬性用於設置文本的字體系列（如 Arial, Times New Roman 等）。可以指定多個字體名稱，以逗號分隔，當第一個字體無法使用時，瀏覽器會依次使用後面的字體。

• 語法：

  font-family: 字體名稱, 備用字體名稱, 通用字體系列;
  

• 範例：

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

  • 上述範例指定了優先使用 Arial 字體，若無法顯示則使用 Helvetica，如果兩者都無法顯示，則使用通用的 sans-serif 字體。

2. 字體大小（font-size）

font-size 屬性用於設置文本的字體大小，可以使用像素（px）、點（pt）、百分比（%）、em（相對於父元素的字體大小）等單位。

• 語法：

  font-size: 大小;
  

• 範例：

  h1 {
      font-size: 24px;
  }
  p {
      font-size: 1.5em; /* 字體大小是父元素的1.5倍 */
  }
  

3. 字體粗細（font-weight）

font-weight 屬性用於設置字體的粗細。可以使用預定義的名稱（如 normal、bold）或數值（如 100、400、700）來定義粗細程度。

• 語法：

  font-weight: 粗細;
  

• 範例：

  strong {
      font-weight: bold; /* 粗體 */
  }
  p {
      font-weight: 300; /* 比普通字體更輕的字重 */
  }
  

• 註：400 為正常字體的標準字重，700 為粗體的標準字重。

4. 字體風格（font-style）

font-style 屬性用於設置字體的風格，如斜體。

• 語法：

  font-style: normal | italic | oblique;
  

• 範例：

  em {
      font-style: italic; /* 斜體 */
  }
  

5. 字體變體（font-variant）

font-variant 屬性用於設定小型大寫字母（small caps）或標準字體。

• 語法：

  font-variant: normal | small-caps;
  

• 範例：

  p.small-caps {
      font-variant: small-caps;
  }
  

6. 行高（line-height）

line-height 屬性用於設置行高，即每行文本之間的距離。可以使用數值、百分比、或者單位（如 px）。

• 語法：

  line-height: 高度;
  

• 範例：

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

7. 字母間距（letter-spacing）

letter-spacing 屬性用於設置字符之間的間距。

• 語法：

  letter-spacing: 間距;
  

• 範例：

  h1 {
      letter-spacing: 2px; /* 字符之間增加2像素的間距 */
  }
  

8. 單詞間距（word-spacing）

word-spacing 屬性用於設置單詞之間的間距。

• 語法：

  word-spacing: 間距;
  

• 範例：

  p {
      word-spacing: 5px; /* 單詞之間增加5像素的間距 */
  }
  

9. 文字對齊（text-align）

text-align 屬性用於設置文本在其容器內的水平對齊方式。

• 語法：

  text-align: left | right | center | justify;
  

• 範例：

  h1 {
      text-align: center; /* 將標題居中對齊 */
  }
  p {
      text-align: justify; /* 將段落的文本兩端對齊 */
  }
  

10. 文字裝飾（text-decoration）

text-decoration 屬性用於設置文本的裝飾效果，例如下劃線、上劃線、刪除線等。

• 語法：

  text-decoration: none | underline | overline | line-through;
  

• 範例：

  a {
      text-decoration: none; /* 移除連結的下劃線 */
  }
  del {
      text-decoration: line-through; /* 刪除線 */
  }
  

11. 文字陰影（text-shadow）

text-shadow 屬性用於添加文本陰影效果。

• 語法：

  text-shadow: 水平偏移 垂直偏移 模糊半徑 顏色;
  

• 範例：

  h1 {
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 黑色陰影 */
  }
  

12. 簡寫屬性（font）

font 是一個簡寫屬性，用於一次性定義字體的樣式、粗細、大小、行高和字體系列。

• 語法：

  font: [風格] [粗細] [大小]/[行高] [字體系列];
  

• 範例：

  p {
      font: italic bold 16px/1.5 'Arial', sans-serif;
  }
  

• 上述範例為段落設置了斜體、粗體、字體大小 16px、行高 1.5 倍和字體系列為 Arial，若不支持則使用 sans-serif。

小結

通過使用這些字體和文本樣式屬性，我們可以靈活控制網頁上文本的外觀和可讀性，從而增強整體的設計效果和用戶體驗。適當的字體選擇和文本樣式設定可以使網頁內容更具吸引力和易讀性。