一次搞懂 CSS 字體單位：px、em、rem 和 %
對於繪圖和印刷而言，「單位」很相當重要的，然而在網頁排版裡，單位也是同樣具有重要性，在 CSS3 普及以來，更支援了一些方便好用的單位 ( px、em、rem...等 )，這篇文章將整理這些常用的 CSS 單位，也幫助自己未來在使用上能更加得心應手。
「網頁」和「印刷」的單位
若要把單位做區隔，最簡單可以分為「網頁」和「印刷」兩大類，通常對於 CSS 來說只會應用到網頁的樣式，畢竟真正要做印刷，還是會傾向透過排版軟體來進行設計。
網頁 ( 單位 )
- px：絕對單位，代表螢幕中每個「點」( pixel )。
- em：相對單位，每個子元素透過「倍數」乘以父元素的 px 值。
- rem：相對單位，每個元素透過「倍數」乘以根元素的 px 值。
- %：相對單位，每個子元素透過「百分比」乘以父元素的 px 值。
網頁 ( 屬性名稱 )
- medium：預設值，等於 16px ( h4 預設值 )
- xx-small：medium 的 0.6 倍 ( h6 預設值 )
- x-small：medium 的 0.75 倍
- small：medium 的 0.8 倍 ( h5 預設值，W3C 定義為 0.89，實測約為 0.8 )
- large：medium 的 1.1 倍 ( h3 預設值，W3C 定義為 1.2，實測約為 1.1 )
- x-large：medium 的 1.5 倍 ( h2 預設值 )
- xx-large：medium 的 2 倍 ( h1 預設值 )
- smaller：約為父層的 80%
- larger：約為父層的 120%
印刷
- pt：印表機的每個「點」，定義為 1 pt ＝ 1/72 in，如果在 72 dpi 的系統上 1 px = 1 pt，但如果在 96 dpi 的系統上 1 px = 0.75 pt ( 72/96 = 0.75 )。
- in：英吋，在 96 dpi 的系統上 1 in = 96 px。
- cm：公分，在 96 dpi 的系統上 1 cm = 37.795275593333 px。
- mm：公釐，在 96 dpi 的系統上 1 cm = 3.7795275593333 px。
範例展示
以下將展示四種不同單位的範例，為公平起見，四個範例都套用預設的 div 格式，純粹改變font-size看看有何不同，由於子元素若沒有設定 font-size，會自動繼承父元素的 font-size，使用上就應該要預先初始化字體大小，下面這兩段 CSS 可以將所有的元素字體大小預設為 16px，爾後亦可個別進行調整。
html{
font-size:16px;
}
html * {
font-size: 1rem;
}
範例展示 1：px、em、rem 和 %
範例展示 2：large、small、medium...等
1. px
px 是絕對單位，因此只要設定多少 px，就會精確的呈現，對於一些講求精準位置的排版而言十分有用，如範例表示的，指定多大 px 字體就會多大。
<div style="font-size:16px;">16px
<div style="font-size:20px;">20px
<div style="font-size:24px;">24px
<div style="font-size:16px;">16px
<div style="font-size:32px;">32px</div>
</div>
</div>
</div>
</div>
2. em
em 是相對單位，為每個子元素透過「倍數」乘以父元素的 px 值，如果我們每一層 div 都使用 1.2em，最內層就會是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。( 瀏覽器預設字體大小為 16px，若無特別指定則會直接繼承父元素字體大小 )
<div style="font-size:1.2em;">1.2em
<div style="font-size:1.2em;">1.2em
<div style="font-size:1.2em;">1.2em
<div style="font-size:1.2em;">1.2em
<div style="font-size:1.2em;">1.2em</div>
</div>
</div>
</div>
</div>
3. rem
rem 是相對單位，為每個元素透過「倍數」乘以根元素的 px 值，如果我們每一層 div 都使用 1.2rem，最內層就會是16px x 1.2 = 19.2px。( 根元素指的是 html 的 font-size，預設為 16px )。
<div style="font-size:1.2rem;">1.2rem
<div style="font-size:1.2rem;">1.2rem
<div style="font-size:1.2rem;">1.2rem
<div style="font-size:1.2rem;">1.2rem
<div style="font-size:1.2rem;">1.2rem</div>
</div>
</div>
</div>
</div>
4. %
% 百分比是相對單位，和 em 大同小異，簡單來說 em 就是百分比除以一百，如果我們每一層 div 都使用 120%，就等同於 1.2em，最內層就會是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。
<div style="font-size:120%;">120%
<div style="font-size:120%;">120%
<div style="font-size:120%;">120%
<div style="font-size:120%;">120%
<div style="font-size:120%;">120%</div>
</div>
</div>
</div>
</div>
5. small、medium、large...等
字體大小的屬性有七種，分別是 xx-small、x-small、small、medium、large、x-large 和 xx-large，除了 x-small，其餘六種分別對應 h6~h1 的標籤文字大小，根據 W3C 的規範，以 medium 預設 16px 為基礎 ( 若 html 字體預設大小改變，medium 也會跟著變 )，使用固定的百分比乘以 medium 的大小，例如 ss-small 預設為16px x 0.6 = 9.6px ( 瀏覽器顯示為 12px )。
<div style="font-size:xx-small;">xx-small
<div style="font-size:x-small;">x-small
<div style="font-size:small;">small
<div style="font-size:medium;">medium
<div style="font-size:large;">large
<div style="font-size:x-large;">x-large
<div style="font-size:xx-large;">xx-large</div>
</div>
</div>
</div>
</div>
</div>
</div>
6. larger、smaller
larger 和 smaller 就是固定百分比為單位，larger 為父層的 120%，smaller 為父層的 80%。
<div style="font-size:medium;">medium
<div style="font-size:larger;">larger
<div style="font-size:larger;">larger
<div style="font-size:larger;">larger
<div style="font-size:smaller;">smaller
<div style="font-size:smaller;">smaller
<div style="font-size:smaller;">smaller</div>
</div>
</div>
</div>
</div>
</div>
</div>
小結
熟悉了字體大小單位之後，就更能有系統的設計整個網站的 CSS 架構，不過 font-size 本身和 font-family 有著一些複雜的關係，不同的 font-family 有時也會影響 font-size 的設定，因此使用上還是得稍微注意一下囉！
範例展示 1：px、em、rem 和 %
範例展示 2：large、small、medium...等