各位網頁設計師、行銷人員、老闆們在操作網站設計時，有沒有常被字體大小的單位給困擾？目前瀏覽器預設的字體大小是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