Learning Objectives
- 寫出包含中文字型、並以通用字型結尾的字型堆疊，說明瀏覽器怎麼逐字遞補
- 用 @font-face 載入網站自己提供的字型檔，並說明中文字型檔為什麼特別大
- 設定 font-size、font-weight，知道字型沒有那個粗細時會發生什麼事
- 說明 line-height 建議不加單位的原因，並用 text-align、letter-spacing、text-decoration 調整文字
- 依中文排版的習慣設定行高、段落間距與行寬
網頁上大部分是文字
打開一篇文章、一份課程公告或一頁作品集，畫面上大部分都是文字。 字型選得好不好、行與行之間擠不擠、一行有多長，直接決定讀的人會不會累、會不會讀到一半就離開。
這一課學和文字有關的 CSS 屬性。它們大多會繼承（上一課），所以通常在 body 或文章的外框設定一次，裡面的元素就全部跟著變。
| 屬性 | 控制什麼 |
|---|---|
font-family |
用哪一套字型 |
font-size、font-weight、font-style |
大小、粗細、斜體 |
line-height |
行高（一行佔多高） |
text-align、letter-spacing、text-decoration |
對齊、字距、底線與刪除線 |
font-family 與字型堆疊
font-family 列出一串字型名稱，叫做字型堆疊（font stack）。瀏覽器從第一個開始找，使用者的電腦裡有就用，沒有就試下一個：
body {
font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
| 位置 | 寫什麼 | 說明 |
|---|---|---|
| 前面 | 你最想用的字型 | 名稱有空白要加引號 |
| 中間 | 各平台內建的字型 | 蘋方（PingFang TC）是 macOS、iOS 內建；微軟正黑體（Microsoft JhengHei）是 Windows 內建 |
| 最後 | 通用字型（generic family） | sans-serif（無襯線，黑體類）、serif（襯線，明體類）、monospace（等寬，程式碼用） |
最後一定要放通用字型：前面的字型全部找不到時，瀏覽器至少知道要用「某一種無襯線字」，而不是隨便拿一套。
遞補是逐字進行的：英文字型通常沒有中文字，遇到中文字時瀏覽器會往堆疊後面找有這個字的字型。
所以 font-family: Inter, "Noto Sans TC", sans-serif 的效果是：英文和數字用 Inter，中文用 Noto Sans TC。
反過來把中文字型放前面，英文也會用中文字型裡附的英文字母。
網站自己提供字型：@font-face
使用者的電腦裡不一定有你要的字型。網站可以把字型檔放在自己的伺服器上，用 @font-face 告訴瀏覽器去哪裡下載：
@font-face {
font-family: "Playfair Display"; /* 自己取的名字，之後在 font-family 裡用 */
src: url("/static/fonts/playfair.woff2") format("woff2");
font-weight: 700; /* 這個檔案是哪一種粗細 */
font-display: swap; /* 下載完成前先用備用字型顯示文字 */
}
h1 {
font-family: "Playfair Display", serif;
}
- woff2 是專為網頁壓縮的字型格式，目前主流瀏覽器都支援，優先使用它。
- 字型檔原則上要和網頁在同一個網站；放在別的網域，對方的伺服器要允許跨來源讀取（CORS）才能用。
font-display: swap讓文字先用備用字型出現，字型下載好再換上，使用者不必對著空白等待。
中文字型檔特別大：英文字型只要幾百個字元，中文字型要收錄上萬個字。
本平台自己提供的 Playfair Display 英文字型，拉丁字母的檔案約 38 KB；Noto Sans TC 中文字型則用 unicode-range 拆成 105 個小檔，合計約 4.3 MB，
瀏覽器只下載頁面上真的用到的字所在的那幾個檔。
很多網站會直接引用公開的字型服務（在 head 放一行別的網域的 link）。Uedu 平台的做法是把字型檔放在自己的伺服器上： 引用別的網域時，每一次開頁面，使用者的瀏覽器都會連到那個網站，對方因此得知有人在讀這一頁。
小測驗：字型堆疊與 @font-face
字型堆疊的最後為什麼要寫 sans-serif 這類通用字型？
font-family: Arial, "Noto Sans TC", sans-serif;，段落內容是「Uedu 平台」。字型會怎麼用？
下面哪一個是 @font-face 一定要有的兩個描述？
某套中文字型只有 400（一般）和 700（粗體）兩個字重。寫 font-weight: 500 會怎樣？
字級、粗細與行高
font-size：內文通常在根元素的 1rem（瀏覽器預設 16px）左右，標題用 rem 往上加（第 9 課）。
font-weight：normal 等於 400、bold 等於 700，數字從 100 到 900。字型必須真的有那個粗細才會顯示得出來；
很多中文字型只有一般和粗體兩種，寫 300 或 500 時瀏覽器會找最接近的字重，看起來和 400 一樣。
字型完全沒有粗體時，瀏覽器可能把字描粗模擬，筆畫容易糊在一起。
line-height：行高。建議不加單位：
.box { font-size: 15px; line-height: 1.1em; } /* 算成 16.5px，這個「長度」傳給子元素 */
.box h2 { font-size: 30px; } /* h2 繼承 16.5px 的行高，兩行字會疊在一起 */
.box { font-size: 15px; line-height: 1.1; } /* 不加單位：傳下去的是「1.1 倍」這個比例 */
.box h2 { font-size: 30px; } /* h2 用自己的字級算：30 × 1.1 = 33px */
帶單位的行高（em、px、%）在父元素就算成固定長度，再原封不動繼承給子元素；不加單位的數字繼承的是比例，每個元素用自己的字級重新算。 內文的行高建議至少 1.5，中文因為筆畫密、沒有字母的上下伸展，常用 1.6 到 1.8。
對齊、字距、裝飾線與中文排版
| 屬性 | 常用的值 | 說明 |
|---|---|---|
text-align |
left、center、right、justify |
對齊；justify 左右切齊，中文段落常用 |
letter-spacing |
0.05em |
字距；標題稍微拉開比較透氣，長篇內文不建議加太多 |
text-decoration |
underline、line-through、none |
底線、刪除線；none 常用來拿掉連結的底線 |
text-indent |
2em |
段落首行縮排兩個字 |
font-style |
italic |
斜體；中文字型通常沒有斜體，瀏覽器硬把字形歪斜，不好讀 |
中文網頁排版常見的習慣：
- 行高比英文大：內文
line-height: 1.6到1.8。 - 段落之間用 margin 留空間：例如
p { margin: 0 0 1em; }；不要在 HTML 裡用好幾個<br>撐開。 - 限制行寬：一行太長，眼睛換行時容易找錯行；文章外框可以加
max-width: 35em，以字為單位限制每行的長度。 - 用全形標點：中文句子裡用全形的，、。：；「」（），不要混用半形的 , . : ;。中英文之間是否加空白，整個網站統一就好。
- 強調用粗體，不用斜體（第 3 課）。
- 連結不要只靠顏色區分：拿掉底線後，色弱或在陽光下看螢幕的人可能分不出哪些字可以點；內文的連結建議保留底線。
小測驗：行高與中文排版
父元素 font-size: 16px，子元素 h2 font-size: 32px。父元素的 line-height 寫成哪一個，h2 的行高會是 48px？
想讓中文段落之間空出一段距離，比較好的做法是？
設計師把所有連結都改成 text-decoration: none，只用藍色區分。主要的問題是？
重點整理
- 字型堆疊：想用的字型 → 各平台內建字型 → 通用字型（
sans-serif、serif、monospace）；遞補是逐字進行的。 @font-face用font-family取名、src指向字型檔（優先 woff2），加font-display: swap；字型檔放在自己的網站上。中文字型檔大，常用unicode-range拆成很多小檔。- 字型要真的有那個粗細才顯示得出來，中文字型常只有一般與粗體。
line-height不加單位，繼承的是比例；內文至少 1.5，中文常用 1.6 到 1.8。- 中文排版：段落間距用 margin、限制行寬、全形標點、強調用粗體、連結保留底線。
下一課講盒模型：每個元素都是一個盒子，內容、內距、邊框、外距怎麼決定它的大小和位置。