--- tags: CSS, 六角筆記王 title: CSS - font-size 屬性預設倍率與單位 --- # CSS - font-size 屬性預設倍率與單位 在瀏覽器中，標籤 `<body>` 字體大小 `font-size` 的預設值通常為 `inherit`，也就是繼承至父元素 `<html>`，大小通常為 `16px`。在切版時常會遇到字體大小不一的標題，而每個瀏覽器預設值不一定相同，可以使用 [Reset](https://meyerweb.com/eric/tools/css/reset/) 或者 [Normalize](https://necolas.github.io/normalize.css/) 來將它們重新處理。 </html> ## 屬性預設倍率 <font size="5">`font-size`</font> 可以設定成 `inherit`，當然也可以設定成其他的屬性或者單位，這裡列出其他的屬性，或許可以作為字體大小命名的依據。 - 根據 `medium`，也就是 `16px` 為基礎乘以固有倍率 | 屬性值 | 倍率 | | -------- | -------- | | `xx-small` | 0.6 (實際測試似乎還是為 0.75) | | `x-small` | 0.75| | `small`| 0.8 | | `medium` | 1 | | `large`| 1.2| | `x-large`| 1.5| | `xx-large`|2| - 根據"父層"去計算字體大小，而非依 `medium` 作為基礎 | 屬性值 | 倍率 | | -------- | -------- | | `smaller` | 0.8 | | `larger` | 1.2 | ## 網頁單位 除了能寫屬性值，最常使用的就是單位，常見的有這些 : | 單位 | 說明 | | -------- | -------- | | `px` | 絕對單位，瀏覽器中的每一個點 | | `em` | 相對單位，倍數計算，根據父層字體大小計算 | | `rem` | 相對單位，倍數計算，根據**根元素**字體大小計算 | | `%` | 相對單位，% 數計算，根據父層字體大小計算 | ## 印刷單位 未實際使用過，列出參考來源寫的。 - 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。 ## 範例 [範例連結](https://codepen.io/hsuan333/pen/XWRPBxx) <iframe height="300" style="width: 100%;" scrolling="no" title="font-size 預設值與單位" src="https://codepen.io/hsuan333/embed/XWRPBxx?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/hsuan333/pen/XWRPBxx"> font-size 預設值與單位</a> by Vic (<a href="https://codepen.io/hsuan333">@hsuan333</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ## 參考來源 > 1. [PJCHENder - 一次搞懂 CSS 字體單位：px、em、rem 和 %](https://www.oxxostudio.tw/articles/201809/css-font-size.html)