設定文字尺寸

這篇教學會介紹 CSS 的樣式屬性：font-size，font-size 主要功能就是「設定文字尺寸」，透過絕對尺寸單位 ( px、pt、in 等 ) 與相對尺寸單位 ( em、rem、% ) 的互相搭配應用，並進一步使用 CSS 的尺寸關鍵字 ( x-small、small、medium、large、x-large 等 )，讓網頁字型尺寸更加容易調整和維護。

完整數值單位參考：長度與角度單位

快速導覽：

• 開始使用 font-size
• 絕對尺寸單位
• 相對尺寸單位
• 尺寸關鍵字
• 尺寸的繼承

開始使用 font-size

CSS 的樣式屬性 font-size 可以設定文字的尺寸大小，支援「絕對尺寸」、「相對尺寸」、「尺寸關鍵字」或「全域關鍵字」四種屬性數值，使用方式如下：

body {
  font-size: 絕對尺寸 or 相對尺寸 or 尺寸關鍵字 or 全域關鍵字;
}

font-size 絕對尺寸單位

「絕對尺寸單位」是使用 font-size 是最常見的數值單位，絕對尺寸單位表示「不會因為其他元素樣式而變動」的單位，font-size 支援下列絕對尺寸單位：

絕對尺寸建議使用 px 為單位，除非要將網頁印出。

下方的範例會使用絕對單位的方式，透過 font-size 設定不同 div 的文字大小。

線上展示：https://codepen.io/oxxo/pen/oNRwVJa

<!-- HTML 程式碼 -->
<div class="a">Hello OXXO!! (24px)</div>
<div class="b">Hello OXXO!! (20px)</div>
<div class="c">Hello OXXO!! (16px)</div>
<div class="d">Hello OXXO!! (12px)</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 5px;
  }
  .a {font-size: 24px;}
  .b {font-size: 20px;}
  .c {font-size: 16px;}
  .d {font-size: 12px;}
</style>

font-size 相對尺寸單位

相對尺寸單位表示「相對於特定元素所計算的數值」，是相當彈性的數值單位，常應用在具有縮放文字大小功能的網頁裡，font-size 支援下列相對尺寸單位：

下方的範例會使用相對單位的方式，透過 font-size 設定不同 div 的文字大小，可以明顯看出「相對於父元素」的元素，文字尺寸都會按照指定的比例放大。

線上展示：https://codepen.io/oxxo/pen/bGyRZXp

<!-- HTML 程式碼 -->
<div class="a">
  Hello OXXO (1.5rem)
  <div>
    Hello OXXO (1.5rem)
    <div>Hello OXXO (1.5rem)</div>
  </div>
</div>
<div class="b">
  Hello OXXO (1.5em)
  <div>
    Hello OXXO (1.5em)
    <div>Hello OXXO (1.5em)</div>
  </div>
</div>
<div class="c">
  Hello OXXO (150%)
  <div>
    Hello OXXO (150%)
    <div> Hello OXXO (150%)</div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  :root {font-size: 12px;}
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 5px;
    text-align: center;
  }
  .a, .a div {font-size: 1.5rem;}  /* .a 和 .a 裡所有的 div */
  .b, .b div {font-size: 1.5em;}   /* .b 和 .b 裡所有的 div */
  .c, .c div {font-size: 150%;}    /* .b 和 .b 裡所有的 div */
</style>

除了可以在 font-size 相對尺寸單位，HTML 的標題元素 H1～H6，也是使用 em 相對單位，相關對照表如下：

下方的範例將兩個 div 設定為不同的文字尺寸，div 裡的 H1～H6 因為相對單位的緣故，就會呈現不同的文字大小。

線上展示：https://codepen.io/oxxo/pen/NWVgmWR

<!-- HTML 程式碼 -->
<div class="a">
  <h1>Hello OXXO (h1)</h1>
  <h2>Hello OXXO (h2)</h2>
  <h3>Hello OXXO (h3)</h3>
  <h4>Hello OXXO (h4)</h4>
  <h5>Hello OXXO (h5)</h5>
  <h6>Hello OXXO (h6)</h6>
</div>
<div class="b">
  <h1>Hello OXXO (h1)</h1>
  <h2>Hello OXXO (h2)</h2>
  <h3>Hello OXXO (h3)</h3>
  <h4>Hello OXXO (h4)</h4>
  <h5>Hello OXXO (h5)</h5>
  <h6>Hello OXXO (h6)</h6>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 12px;
  }
  h1,h2,h3,h4,h5,h6 {margin: 0;}

  .a {font-size: 10px;}    /* .a 預設字型尺寸為 10px */
  .b {font-size: 20px;}    /* .b 預設字型尺寸為 20px */
</style>

font-size 尺寸關鍵字

font-size 支援下列幾個尺寸關鍵字，只要套用尺寸關鍵字，就會套用對應的絕對尺寸或相對尺寸單位。

下方範例中的六個 div，分別使用不同的尺寸關鍵字，就會套用對應的文字尺寸 ( 最下方兩個使用相對尺寸的關鍵字，相對於父元素 body 的文字大小 )

線上展示：https://codepen.io/oxxo/pen/RwmgOrb

<!-- HTML 程式碼 -->
<div class="a">Hello OXXO!! (xx-large)</div>
<div class="b">Hello OXXO!! (large)</div>
<div class="c">Hello OXXO!! (medium)</div>
<div class="d">Hello OXXO!! (x-small)</div>
<div class="e">Hello OXXO!! (smaller)</div>
<div class="f">Hello OXXO!! (larger)</div>

<!-- CSS 程式碼 -->
<style>
  body {font-size: 20px;}
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 5px;
  }
  .a {font-size: xx-large;}
  .b {font-size: large;}
  .c {font-size: medium;}
  .d {font-size: x-small;}
  .e {font-size: smaller;}  /* 父元素 20px x 80% = 16px */
  .f {font-size: larger;}   /* 父元素 20px x 120% = 24px */
</style>

font-size 尺寸的繼承

font-size 是具有「繼承關係」的樣式屬性，換句話說如果子元素沒有設定 font-size，則會繼承父元素的 font-size，下方範例中的兩個 div 都沒有設定內容 div 的 font-size，因此內容所有元素的文字大小，都會繼承最父元素的文字大小。

線上展示：https://codepen.io/oxxo/pen/NWVgmjp

<!-- HTML 程式碼 -->
<div class="a">
  Hello OXXO!!
  <div>
    Hello OXXO!!
    <div>Hello OXXO!!</div>
  </div>
</div>
<div class="b">
  Hello OXXO!!
  <div>
    Hello OXXO!!
    <div>Hello OXXO!!</div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 5px;
  }
  .a {
    font-size: 12px;
  }
  .b {
    font-size: 20px;
  }
</style>

小結

font-size 的操作方式很簡單，只需要設定文字大小就可以，因此 font-size 的重點就會擺在「相對尺寸單位」和「絕對尺寸單位」，根據網頁的特性，採用不同的單位，就變成網頁設計師的重要工作！

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～