一次搞懂 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...等