close

前端工程師要如何將字體單位學得好?看這就對了!-絕對單位篇

CSS的字體單位讓身為前端工程師的你頭昏腦脹?今天用兩篇來鋪好你的字體基礎之路!

 

在 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.

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

 

延伸閱讀:

前端工程師要如何將字體單位學得好?看這就對了!-相對單位篇

為了成為前端工程師,我一定要成功-認識Class選擇器

為了成為前端工程師,我一定要成功-認識ID選擇器

台灣人工智慧在加護病房當守護天使,預測敗血症成功率達八成五!

全球最大賣場人員自從有了這款人工智慧玩具,每個人都笑顏逐開了?!

還在看惡評達內PTT? 有判斷力的你直接來達內試試就知道!!

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

 

arrow
arrow
    創作者介紹
    創作者 布萊恩的創業小窩 的頭像
    布萊恩的創業小窩

    布萊恩的創業小窩的部落格

    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()