CSS rem、em用法為何?網頁設計字體大小怎麼用

css字體大小

各位網頁設計師、行銷人員、老闆們在操作網站設計時,有沒有常被字體大小的單位給困擾?目前瀏覽器預設的字體大小是16px,其中px就是css的字體單位,除了常見的px外還有em、rem、%這些單位,要如何區分呢?

CSS字體大小單位

在設計網頁時一定會遇到css字體大小調整的問題,甚至在RWD響應式設計還會針對手機、平板等裝置做不一樣的字體大小設定,常用的四個字體單位只有px為絕對單位,em、rem、%都是相對單位。

  • px:屬於絕對單位,為最常見的字體大小單位,代表螢幕的點(pixel )
  • em:屬於相對單位,代表元素字體大小為父元素px值乘上某個「倍數」
  • rem:屬於相對單位,代表元素字體大小為根元素px值乘上某個「倍數」
  • %:屬於相對單位,代表元素字體大小為父元素px值乘上某個「百分比」

展示字體大小單位

html{
font-size:14px;
}

rem demo

範例HTML及CSS

rem是相對單位,子元素的字體大小為根元素字體大小的倍數值,如當前元素設定1.5em的字體即為根元素的1.5倍字體大小,以範例來說不管多內層的子元素字體大小皆是21px(根元素14px*1.5=21px)。

rem適合用在全站的尺寸切換,前端設計師可根據不同螢幕尺寸如平板、手機,統一調整全站的文字大小,是RWD設計中很重要的css技巧。

<span style="font-size: 1.5rem;">1.5rem
<span style="font-size: 1.5rem;">1.5rem
<span style="font-size: 1.5rem;">1.5rem
</span>
</span>
</span>

範例字體呈現效果

1.5rem
1.5rem
1.5rem

em demo

範例HTML及CSS

<span style="font-size: 1.5em;">1.5em
<span style="font-size: 1.5em;">1.5em
<span style="font-size: 1.5em;">1.5em
</span>
</span>
</span>

範例字體呈現效果

em是相對單位,子元素的字體大小為父元素字體大小的倍數值,如當前元素設定1.5em的字體即為該元素之父元素的1.5倍字體大小。

1.5em
1.5em
1.5em

% demo

範例HTML及CSS

%是相對單位,用法同em,子元素的字體大小為父元素字體大小的百分比值,如當前元素設定150%的字體即為該元素之父元素的150%字體大小。

<span style="font-size: 150%;">150%
<span style="font-size: 150%;">150%
<span style="font-size: 150%;">150%
</span>
</span>
</span>

範例字體呈現效果

150%
150%
150%

px demo

範例HTML及CSS

<span style="font-size: 14px;">14px
<span style="font-size: 16px;">16px
<span style="font-size: 18px;">18px
</span>
</span>
</span>

範例字體呈現效果

PX是絕對單位,為網頁設計中最常使用的大小單位,除了應用在font-size外,px也常使用於line-height(字體範圍高度)、letter-spacing(文字間距)、margin(元素外距)、padding(元素內距)。PX設定多少就會呈現多大的PX,適合用於需要客製化的區域。

14px
16px
18px

Close