顧名思義, 這個css的功能就是在改變字體的大小; 這很容易理解! 那麼我們在使用上有什麼特別需要注意的地方嗎？
首先, 我們先看一下有哪些用法
/* 1. 絕對大小 absolute-size values */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;
/* 2. 相對大小 relative-size values */
font-size: smaller;
font-size: larger;
/* 3. 直接設定大小 length values */
font-size: 12px;
font-size: 0.8em;
/* 4. 用百分比決定大小 percentage values */
font-size: 80%;
/* 5. 採用數學算式來設定 math value */
font-size: math;
/* 6. 使用全域參數 Global values */
font-size: inherit;
font-size: initial;
font-size: revert;
font-size: revert-layer;
font-size: unset;Descrioption
- 這樣的字體大小是以系統預設字體大小為基礎來進行設定.
- 此用法採用層級的概念, 子層級的字體大小以上層級的字體大小為基礎來進行調整.
- 這邊要注意, 這個值可沒有負數!! 如果你使用的是 em, ex 是以父層級的字體為依據喔! 但如果你用的單位是 rem 則是以 html 整個字體大小為依據!
- 同樣的這個用法也沒有負數的存在, 這邊的基礎也是以父層級基礎喔!
- 這邊的數學計算如果是有比例的存在, 也是採用父層級為基礎進行運算喔! 可以參考 Link
- inherit 繼承, initial 將字體設為在初始化的大小, revert 將字體大小的設定恢復原狀, 有繼承就繼承! rever-layer 根據層級的設定來恢復字體大小的值, unset 不指定字體大小, 如有層級可以繼承設定就會直接採用, 如果沒有就用系統原始設定.
/* 字體單位 */
px, pixels, 最精準的設定方式
em, ems, 以所屬層級的字體大小進行倍數設定, 2em 就是代表兩倍大, 200% = 2em, 可以自己試試 https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
rem, rems, 他跟 em 的不同就在於這邊是以 html 的字體大小為基礎來計算
ex, 這個很特別, 就是指英文字母小寫 x 的高度, 2ex 就代表小寫字母 x 的兩倍高