建立 2025-02-25 更新 2026-09-11

字型與文字排版（Fonts & Typography）

文字可讀性往往比顏色更能決定網站質感。先選字族與字級節奏，再調行高與間距。

常用屬性

屬性	作用	例子
`font-family`	字族清單	`"Noto Sans TC", sans-serif`
`font-size`	字級	`1rem`、`clamp()`
`font-weight`	粗細	`400`、`700`、`bold`
`font-style`	斜體	`normal`、`italic`
`font-variant`	小型大寫等	`small-caps`
`line-height`	行高	`1.6`（無單位倍數較穩）
`letter-spacing`	字距	`0.02em`
`word-spacing`	詞距	`0.05em`
`font-display`	網頁字體載入策略	寫在 `@font-face`

`font-family`

瀏覽器由左到右找第一個存在的字。最後一定要寫通用族名：sans-serif、serif、monospace、system-ui。

:root {
  --font-sans: "Noto Sans TC", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

body { font-family: var(--font-sans); }
code { font-family: var(--font-mono); }

含空白或符號的名稱要加引號。中文請把中文字族放在西文前面或依設計稿順序排列。

網頁字體

@font-face {
  font-family: "Source Han Sans";
  src: url("/fonts/SourceHanSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

font-display: swap 會先顯示後備字，下載完再替換，避免文字空白。檔案請用 woff2，並只子集需要的字重。

字級與行高

html { font-size: 100%; } /* 尊重使用者預設，通常 16px */

body {
  font-size: 1rem;
  line-height: 1.7;
}

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

長文行高約 1.5–1.8
大標題行高可較緊（1.2–1.35）
無單位的 line-height: 1.6 會隨字級等比縮放，比 24px 適合 RWD

粗細與斜體

數值 100–900。若字體檔沒有 300，瀏覽器可能合成（fake bold），邊緣發虛。有提供的字重才指定。

.lead { font-weight: 500; }
strong, b { font-weight: 700; }

`font` 縮寫

.kicker {
  font: italic 600 0.875rem/1.4 var(--font-sans);
}

順序：style → weight → font-size（必填） → 可選 /line-height → font-family（必填）。縮寫會重設未寫到的 font-*，不熟時分開寫較安全。

換行與空白

屬性	用途
`white-space`	`nowrap` 不換行；`pre-wrap` 保留換行
`overflow-wrap: anywhere`	長 URL 斷行
`word-break: keep-all`	中文避免一字一行時可搭配設計
`text-overflow: ellipsis`	單行省略，需 `overflow: hidden` + `nowrap`
`line-clamp`	多行省略（`-webkit-line-clamp` 仍常見）

.title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

總結

用變數集中管理字族；標題、正文、程式碼分開。
字級用 rem / clamp()，行高用倍數。
網頁字體記得 font-display 與 woff2。

裝飾線見文字裝飾，對齊見文字對齊。