CSS提供了非常多font-size的單位

用在網頁顯示上的 keywords, ems, exes, pixels, percentages
用在列印的 picas, points, inches, centimeters, millimeters.

Pixels

透過 Pixel 設定字型大小是最直接的方式，瀏覽器會依照設定的pixel顯示字型。

1
font-size: 36px;

Keywords

透過 Keywords 設定字型大小，使用上會有所限制，只有七種大小能夠選擇

1
font-size: xx-small, x-small, small, medium, large, x-large, xx-large;

Percentages

透過 Keywords 設定字型大小，直接用倍數乘上Base text size

1
font-size: 200%;

Base text size 大部分瀏覽器初始的font-size設定為16px

ems

透過 em 設定字型大小，跟百分比很像，也是用倍數乘上Base text size

em 會讓文字的大小透過元素inherit(傳承)下去

1
2
3
4
5
6
7
8
9
/* Base text size == 16px */
.page{
	font-size: .5em; /* 16px * 0.5 = 8px */
}
.page p{
	font-size: .5em; /* 16px * 0.5 * 0.5 = 4px */
}

rems

透過 rem 設定字型大小，可以改善em 所造成的傳承疊加的問題

1
2
3
4
5
6
7
8
9
/* Base text size == 16px */
.page{
	font-size: .5rem; /* 16px * 0.5 = 8px */
}
.page p{
	font-size: .5rem; /* 16px * 0.5 = 8px */
}