文字尺寸

这篇教学会介绍 CSS 的样式属性：font-size，font-size 主要功能就是“设定文字尺寸”，透过绝对尺寸单位 ( px、pt、in 等 ) 与相对尺寸单位 ( em、rem、% ) 的互相搭配应用，并进一步使用 CSS 的尺寸关键字 ( x-small、small、medium、large、x-large 等 )，让网页字型尺寸更加容易调整和维护。

完整数值单位参考：长度与角度单位

快速导览：

• 使用 font-size 设定文字大小
• 绝对尺寸单位
• 相对尺寸单位
• 尺寸关键字
• 尺寸的继承

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

使用 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 的重点就会摆在“相对尺寸单位”和“绝对尺寸单位”，根据网页的特性，采用不同的单位，就变成网页设计师的重要工作！

意见反馈