整理關於網頁字體 Typography 相關知識，包含 font-size、font-family 以及 font 的各種排版應用與變化 (writing-mode, text-combine-upright)。
說明
font-size
| pt | px | em | % | size |
|---|---|---|---|---|
| 7.5px | 10px | 0.625em | 62.5% | x-small |
| 10pt | 13px | 0.8em | 80% | small |
| 10.5pt | 14px | 0.875em | 87.5% | |
| 12pt | 16px | 1em | 100% | medium |
| 13.5pt | 18px | 1.125em | 112.5% | large |
| 14pt | 19px | 1.2em | 120% | |
| 14.5pt | 20px | 1.25em | 125% | |
| 16pt | 22px | 1.4em | 140% | |
| 18pt | 24px | 1.5em | 150% | x-large |
| 24pt | 32px | 2em | 200% | xx-large |
| 27pt | 36px | 2.25em | 225% | |
| 36pt | 48px | 3em | 300% |
font-family
Consolas
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
+ - > < == === >= <= != @ ! (a) [a] {a}
Roboto Mono
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/roboto-mono.min.css");
font-family: 'Roboto Mono', sans-serif;abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
+ - > < == === >= <= != @ ! (a) [a] {a}
Cacscadia Code
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/cascadia-code.min.css");
font-family: 'Cascadia Code', sans-serif;abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
+ - > < == === >= <= != @ ! (a) [a] {a}
Noto Sans TC
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@700;900&display=swap');
font-family: 'Noto Sans TC', sans-serif;滿懷憂傷卻流不出淚，極度的疲憊卻不能入睡
俐方體11號 / Cubic 11
Pixel Style 的字體，是除了 Press Start 2P 外的 Pixel 字體選擇。
Patrick Hand
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
font-family: 'Patrick Hand', cursive;abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
+ - > < == === >= <= != @ ! (a) [a] {a}
I ask the indulgence of the children who may read this book for dedicating
it to a grown−up. I have a serious reason: he is the best friend I have in
the world.
文字的效果
- Text Indent
- 文字縮排，首行縮排用途
- Text Shadow
-
文字陰影 text-shadow: 6px 6px 6px #3498dbtext-shadow: offset-x offset-y blur-radius shadow-color