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

有興趣瞧瞧其他新文章嗎?