今天來看看CSS的字體樣式~~

在網頁設計中，字體樣式與排版設置直接影響到網站的可讀性和視覺效果。今天，我們將學習如何使用 CSS 控制字體的各種屬性，如字體家族、字體大小、字體粗細，行高，以及文字對齊與變形等。

1. 字體設定（font-family、font-size、font-weight、line-height）

• font-family 屬性用來指定元素的字體類型。它可以接受多個字體名稱，瀏覽器會按照順序尋找字體，直到找到一個可用的字體。

• font-size 屬性用來指定文字的大小，可以使用像素（px）、百分比（%）或字體大小單位（如 em 和 rem）來設定。

  <style>
    h1 {
      font-size: 36px;
    }
  
    p {
      font-size: 16px;
    }
  </style>
  
  <h1>這是標題，字體大小為 36px</h1>
  <p>這是段落文字，字體大小為 16px。</p>
  

  

• font-weight 用來設置字體的粗細，常見的值有：

  • normal：正常字重。
  • bold：粗體字。
  • 數值範圍 100 到 900：越高代表字體越粗。

  <style>
    p.normal {
      font-weight: normal;
    }
  
    p.bold {
      font-weight: bold;
    }
  
    p.extra-bold {
      font-weight: 900;
    }
  </style>
  
  <p class="normal">這是正常的文字。</p>
  <p class="bold">這是粗體字的文字。</p>
  <p class="extra-bold">這是極粗字的文字。</p>
  

  

• line-height 屬性用來控制行與行之間的距離，通常設置為字體大小的 1.2 到 1.6 倍，提升文字的可讀性。

  <style>
    p {
      line-height: 1.5;
    }
  </style>
  
  <p>這段文字的行高設為 1.5 倍字體大小，能增加段落的可讀性。</p>
  

今天先介紹到這裡，謝謝觀看！