字體排版
2026-02-19 約 793 字 --
近期在設計網站時，為了要讓每個頁面的設計一致，我都會建立幾個 Demo 的的頁面，把所有會用到的頁面元素都列舉出來，例如按鈕、卡片等 Components。更基礎一些的，則是這篇文章的將會列舉的字體及排版系統，包含字型、標題、引用、程式碼及清單等等。
字體系統
現在開發時，透過使用 Tailwind v4 的 Library，都有寫好的 @theme 來定義使用系統原生字型，不需要額外載入字型檔案：
@theme {
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}如此定義後，在各平台實際對應字型就是：
| 平台 | 無襯線字型 | 等寬字型 |
|---|---|---|
| MacOS | San Francisco | SF Mono / Menlo |
| Windows | Segoe UI | Consolas |
| Linux | Noto Sans | Liberation Mono |
接下來則會將常用的字體相關元素羅列出來。
字體規格表
標題與內文的尺寸由 @tailwindcss/typography plugin 的 prose 預設控制，基於 16px 基礎字級。
標題層級規格
| 層級 | 尺寸 | 行高 | 使用情境 |
|---|---|---|---|
| H1 | 36px (2.25em) | 1.11 | 頁面主標題 |
| H2 | 24px (1.5em) | 1.33 | 主要區段標題 |
| H3 | 20px (1.25em) | 1.6 | 次要區段標題 |
| H4 | 16px (繼承) | 1.5 | 小節標題 |
頁面標題（非 prose 內）另以 Tailwind class 控制：text-2xl sm:text-4xl（24px / 36px）。
內文規格
| 元素 | 尺寸 | 行高 | 使用情境 |
|---|---|---|---|
<p> | 16px (1rem) | 1.75 | 主要內文、長文閱讀 |
<small> | 12px (0.75rem) | — | 註解、輔助資訊 |
<code> | 14px (0.875em) | 1.71 | 行內程式碼 |
<blockquote> | 繼承內文大小 | 1.75 | 重點引用文字 |
標題層級示範
H1 標題 - 頁面主標題
H2 標題 - 主要區段標題
H3 標題 - 次要區段標題
H4 標題 - 小節標題
H5 標題 - 段落標題
H6 標題 - 輔助性標題
正文內容
這是一段正常的段落文字，使用系統原生無襯線字型，文字大小預設為 16px，行高 1.75 倍，具有良好的可讀性和現代感。
這是另一段文字，展示段落之間的間距效果。我們可以在文字中使用 粗體文字（Bold） 來強調重要內容，或是使用 斜體文字（Italic） 來表示特殊含義。
你可以點選 這個連結 來查看連結的樣式效果，連結具有 hover 效果和適當的顏色對比。
程式碼
行內程式碼
在段落中可以插入 console.log('Hello, Howard') 這樣的行內程式碼。
程式碼區塊
function greetUser(name) {
// Some comments
// 中文註解
const message = `Hello, ${name}!`;
return message;
}
greetUser('Howard');引用文字
這是一段引用文字的範例。引用文字通常用來展示重要的觀點、名言佳句，或是來自其他來源的內容。
引用文字具有特殊的樣式，包括斜體字型、不同的顏色，以及左側的裝飾線條。
清單內容
無序清單
- 第一個清單項目
- 第二個清單項目
- 嵌套的子項目
- 另一個子項目
- 第三個清單項目
有序清單
- 第一步：準備材料
- 第二步：開始製作
- 子步驟一
- 子步驟二
- 詳細說明一
- 詳細說明二
- 子步驟三
- 第三步：完成作品
#css