---
# System prepended metadata

title: CSS 13. font-size - px and rem
tags: [2022 網頁開發全攻略教程 / CSS篇章 - font styling]

---

# CSS 13. font-size - px and rem

### 開始 text styling 的旅程!

#### CSS Units / 認識 font size 的單位

- [參考 W3C](https://www.w3schools.com/cssref/css_units.php)

- Absolute Lengths / 絕對的單位 - 現實可以看到的單位:

  常用於網頁開發的有: `px ` / 一般網站設定的文字大小為: `16px`
  
```
p {
  font-size: 30px; // 改變文字大小設定: 30px
}
```


---

- Relative Lengths / 相對的單位: 
  
  參考 W3C 文件:

![](https://i.imgur.com/HpVcEqh.png)

- 下列我們最常使用到的有 `rem`


#### rem 單位的運作原理:

- 假定我們網頁預設的 font-size 是 `16px`

  那我們設定 `1rem` 即等於 `16px`

  意思是說: rem 則是以網頁預設的大小，以倍數來做調整的！
  
  
###### tags: `2022 網頁開發全攻略教程 / CSS篇章 - font styling`