CSS | Typography

2022-01-26

整理關於網頁字體 Typography 相關知識，包含 font-size、font-family 以及 font 的各種排版應用與變化 (writing-mode, text-combine-upright)。

說明

font-size

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 字體選擇。

GitHub

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 #3498db

text-shadow: offset-x offset-y blur-radius shadow-color

參考資料

中文 CSS 排版原則指南