前端工程師的字體單位世界原來一點都不複雜!(字體的絕對單位篇)

你是前端工程師嗎?那兩種主要的字體單位你絕對不能不知道!快來更深入了解!

在 CSS ，字體單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位：（本篇介紹主要介紹絕對單位）

分別介紹如下：

目錄 1. 絕對單位   px (pixel 畫素)   cm / pt / in / pc / mm   large, medium, small 2. 相對單位   em   rem   %   larger, smaller

 

前端工程師必知的字體單位：絕對單位

px (pixel 畫素)

px 為 CSS 最常用的單位。無論字體大小、區塊或其他元素的尺寸設定，都少不了它的蹤影。一般認為：px 會依據螢幕解析度而變化、平時被歸類為相對尺寸。但為何在 CSS 裡面就變成絕對尺寸呢？因為在 CSS 裡面，絕對尺寸的定義是「不會繼承上層父元素的設定」的尺寸。在 CSS 中，無論設定多少 px，它就會精確的呈現，他都不會繼承沿襲上一層的父元素的尺寸。如以下例子所示，就是若使用 px 這個單位來設定大小，那麼不管頁面上其他的尺寸設定，都不會影響到他。

而 px 的定義，理論上就是：一個像素 px 意思就是螢幕上最小的一點：16 px 就是 16 點大小。

See the Pen #demo-px by Tedutw (@Tedutw) on CodePen.

cm、pt、in、pc、mm

這些單位比較適用於印刷的排版軟體，在 CSS 比較少用。分別解釋如下：

1. in：英吋，在 96 dpi 的系統上 1 in = 96 px。
2. cm：公分，在 96 dpi 的系統上 1 cm = 37.795275593333 px。
3. mm：公釐，在 96 dpi 的系統上 1 mm = 3.7795275593333 px。
4. pt：印表機的每個「點」，定義為 1 pt ＝ 1/72 in，如果在 72 dpi 的系統上 1 px = 1 pt，但如果在 96 dpi 的系統上 1 px = 0.75 pt ( 72/96 = 0.75 )。
5. pc：picas，定義為 1 pc ＝ 12 pt。
6. in：英吋，在 96 dpi 的系統上 1 in = 96 px。

See the Pen #demo-cm、pt、in、pc、mm by Tedutw (@Tedutw) on CodePen.

large, medium, small

字體大小的屬性有七種如下：

1. xx-small：對應 h6 的標籤文字大小，為 medium 字體的 3/5 倍。
2. x-small：沒有對應的標籤文字大小，為 medium 字體的 3/4 倍。
3. small：對應 h5 的標籤文字大小，為 medium 字體的 8/9 倍。
4. medium：對應 h4 的標籤文字大小，，根據 W3C 的規範，以 medium 預設 16px 為基礎
5. large：對應 h3 的標籤文字大小，為 medium 字體的 6/5 倍。
6. x-large：對應 h2 的標籤文字大小，為 medium 字體的 3/2 倍。
7. xx-large：對應 h1 的標籤文字大小，為 medium 字體的 2/1 倍。

由上方看出，除了 x-small 沒有對應的標籤文字大小外，其餘六種分別對應 h6~h1 的標籤文字大小。而 medium 根據 W3C 的規範，大小為預設的 16px 為基礎 (除非另有自行設定預設字體大小，則不再此限)。所有的 large 與 small 屬性都是使用固定的倍數乘上 medium 的大小。

See the Pen #demo-large, medium, small by Tedutw (@Tedutw) on CodePen.

而別忘了前端工程師還有另一種不能不知道的字體單位，下集見分曉!

 

👄延伸閱讀：

前端工程師的字體單位世界原來一點都不複雜!(字體的相對單位篇) 

HTML5教學的CSS基礎請打好!-字型排序一次滿足

前端工程師口中的"盒子模型",今天用兩篇讓你立馬了解!(上)

守住傳統但穩定的網路行銷課程-白帽SEO

選擇Python課程前,看看世界十大AI領袖怎麼運用科技改變未來

達內教育評價很兩極?實際上過課就知誰是真功夫!

達內課程先就業再付款- 中時電子報