CSS 字型大小
字型大小
font-size 屬性設定文字的大小。
在網頁設計中，能夠管理文字大小非常重要。但是，你不應該使用字型大小的調整來讓段落看起來像標題，或讓標題看起來像段落。
始終使用正確的 HTML 標籤，例如用於標題的 <h1> - <h6> 和用於段落的 <p>。
字型大小的值可以是絕對大小或相對大小。
絕對大小
- 將文字設定為指定大小
- 不允許使用者在所有瀏覽器中更改文字大小（這不利於可訪問性）
- 當輸出的物理尺寸已知時，絕對大小很有用
相對大小
- 相對於周圍元素設定大小
- 允許使用者在瀏覽器中更改文字大小
注意： 如果不指定字型大小，則正常文字（如段落）的預設大小為 16px (16px=1em)。
使用畫素設定字型大小
使用畫素設定文字大小可讓您完全控制文字大小
提示： 如果使用畫素，您仍然可以使用縮放工具來調整整個頁面的大小。
使用 Em 設定字型大小
為了讓使用者能夠調整文字大小（在瀏覽器選單中），許多開發者使用 em 而不是畫素。
1em 等於當前的字型大小。瀏覽器中的預設文字大小為 16px。因此，1em 的預設大小是 16px。
可以使用以下公式將大小從畫素轉換為 em：畫素/16=em
示例
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
自己動手試一試 »
在上面的示例中，em 文字大小與上一示例中的畫素大小相同。但是，使用 em 大小，可以在所有瀏覽器中調整文字大小。
遺憾的是，舊版 Internet Explorer 仍然存在一個問題。當放大時，文字會比應有的更大，當縮小到小於應有的尺寸時。
使用百分比和 Em 的組合
在所有瀏覽器中都有效的一種解決方案是為 <body> 元素設定預設字型大小（以百分比表示）
示例
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
自己動手試一試 »
我們的程式碼現在執行得很好！它在所有瀏覽器中顯示相同的文字大小，並且允許所有瀏覽器縮放或調整文字大小！
響應式字型大小
可以使用 vw 單位設定文字大小，它代表“視口寬度”。
這樣，文字大小將跟隨瀏覽器視窗的大小。
你好世界
調整瀏覽器視窗大小，檢視字型大小如何縮放。
視口是瀏覽器視窗的大小。1vw = 視口寬度的 1%。如果視口寬 50 釐米，則 1vw 為 0.5 釐米。
