Ziano WF
傳承字形WF
- 辶
- 糹
- 厶
- 北
- 山
- 雨
- 言
- 青
- 育
- 漢
- 英
- 美
- 館
以最新的Google Fonts字體切片技術，重現千年淬鍊的傳承字形。
Woff2 × CDN邊緣分發，讓漢字的經典美學，用毫秒神速在網頁呈現。
為何要用傳承字形？
正統印刷字，與被國字標準字體殘害的系統字體
傳承字形（舊字形），是從雕版、鑄字時代一脈相承的印刷體正統造形，鉛字一脈的端正勻稱。教育部國字標準字體強以楷書手寫筆勢改寫印刷體，破壞了傳統工匠為了印刷體傳承數百年的精美部件，千年雕印工藝美學蕩然無存⸺連教育部自己的文件都承認，這套字在美觀上「仍有許多可以再努力的地方」。而蘋方、微軟正黑、新細明體等系統字體悉數採用這套標準⸺你螢幕上的預設漢字，就是被殘害後的模樣。Ziano收錄這一脈典雅精緻的傳承字形印刷體，給數位閱讀一個更好的選擇。
- 漢漢漢漢
- 骨骨骨骨
- 育育育育
- 絲絲絲絲
- 北北北北
- 山山山山
- 瓜瓜瓜瓜
- 過過過過
國字標準字體本是手寫規範，用在楷體這類跟著手寫筆勢走的字體上，名正言順，但不應強加於明體、黑體等講求平衡對稱的印刷字體。楷書的橫畫天生左低右高，斜勢自然兜住這些不對稱。印刷體橫平豎直，字形搬了過去，平衡卻沒跟著搬。教學歸楷書，印刷歸美感，兩者本不衝突。
- 漢
- 骨
- 育
- 絲
- 北
- 山
- 瓜
- 過
為什麼快？
120片woff2，按需下載
- 整套字依用字頻率切成120片woff2。
- 頁面沒用到的字，一位元組都不會下載。
- 一般頁面只取最後十幾片，毫秒到位。
到切片實驗室彈彈，每打一個字，它所屬的切片琴鍵就會亮起。
三十秒上手
CDN快速載入，一行套用
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hanzi.pro/webfonts-shanggu-sans@latest/swap.css">font-family: 'Avenir Next', 'Segoe UI Variable', 'Segoe UI', Roboto, 'Shanggu Sans', sans-serif;完整的四層回落鏈，見用法。
- 尙古明體・丹
- Shanggu Serif
- 可變字體・250-900
- 明體・傳承字形
- 可變字體・250-900
- 尙古明體・月
- Shanggu Serif Yue
- 可變字體・250-900
- 明體・傳承字形
- 可變字體・250-900
- 尙古黑體・丹
- Shanggu Sans
- 可變字體・250-900
- 黑體・傳承字形
- 可變字體・250-900
- 尙古黑體・月
- Shanggu Sans Yue
- 可變字體・250-900
- 黑體・傳承字形
- 可變字體・250-900
- 源起明體・月
- Genki Serif Yue
- 靜態字體・250 300 400 500 600 700 900
- 明體・傳承字形
- 靜態字體・250 300 400 500 600 700 900
- 源起明體・丹
- Genki Serif
- 靜態字體・250 300 400 500 600 700 900
- 明體・傳承字形
- 靜態字體・250 300 400 500 600 700 900
- 源起黑體・月
- Genki Sans Yue
- 靜態字體・250 300 400 500 700 900
- 黑體・傳承字形
- 靜態字體・250 300 400 500 700 900
- 源起黑體・丹
- Genki Sans
- 靜態字體・250 300 400 500 700 900
- 黑體・傳承字形
- 靜態字體・250 300 400 500 700 900
- 霞鶩文楷TC
- LXGW WenKai TC
- 靜態字體・300 400 500
- 楷體・傳承字形
- 靜態字體・300 400 500
- 霞鹜文楷SC
- LXGW WenKai
- 靜態字體・300 400 500
- 楷體・GB簡體字形
- 靜態字體・300 400 500
- 芫荽
- Iansui
- 靜態字體・400
- 楷體・國字標準字形
- 靜態字體・400
- クレーOne
- Klee One
- 靜態字體・400 600
- 楷體・JIS新字形
- 靜態字體・400 600
字裡行間的傳承
清晨的台北，捷運緩緩駛過城市的骨幹，車窗外的天色由青轉亮。月台上，旅客的情緒交織成一片低語，有人讀著手中的書，有人望向遠方的海角。文字像一條無形的絲線，把過去與現在織在一起。每個字的形體，都承載著前人的講究與情感。
從英國到台北，從鉛字到螢幕，書寫的方式不斷改變，對美的追求卻始終如一。傳承字形所展現的，正是這份對細節的尊重⸺戶的寫法、骨的轉折、直的橫豎、青的結構、過的走之，無一不在訴說漢字悠長的歷史。當我們重新端詳這些字，彷彿能聽見時間的回響，看見文化在筆畫間靜靜流動，言語與書藝交融，從不間斷。
用法
對抗楷化印刷字體，沒有妥協
Ziano將全套傳承字形字體切割為120個以用字頻率畫分、大小不等的woff2字體檔，透過CDN或npm分發。引用僅是第一步，真正決定網頁排版品質的，是font-family回落鏈的排列。本指南提供一套完整經過驗證的回落順序，可直接套用。
載入字體
方法一：透過CDN
在<head>中加入以下兩行。preconnect預先建立連線，stylesheet只會請求頁面實際用到的切片，未使用的切片不會被下載：
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hanzi.pro/webfonts-shanggu-serif@latest/swap.css" />將shanggu-serif替換為所需的字族id。@latest永遠取最新正式版；若需 CDN 邊緣不可變、可長期快取的 URL，把@latest改為明確版本號（如@0.1.0）即可。
方法二：自托管（npm）
若需將字體部署於自有伺服器，以npm安裝對應套件，files/下的woff2會一併安裝，再透過打包工具import對應的CSS：
npm i @hanzi.pro/webfonts-shanggu-serif@latestimport '@hanzi.pro/webfonts-shanggu-serif/swap.css'指定字族：回落鏈的排列原則
font-family不是「指定單一字體」，而是定義一條回落鏈。排列得當，中西文混排自然協調、罕用字有字體承接、離線時也不致崩壞。一條完整的中文字族鏈由前到後分為四層：
font-family:
'Avenir Next', 'Segoe UI Variable', 'Segoe UI', Roboto, /* ① 西文字體在前 */
'Shanggu Sans', /* ② Ziano收錄的中文傳承字形字體 */
'Hiragino Sans', 'Hiragino Sans GB', 'Yu Gothic', /* ③ 系統日文字體墊底 */
system-ui, sans-serif /* ④ generic 收尾 */
;① 西文字體開頭：以web-safe西文字體呈現拉丁字母與數字
將西文字體置於最前，讓中西文混排的文本得以最精緻的效果呈現，這也是中文網頁行之有年的排版方式。
② 傳承字形：漢字的主要字體
'Shanggu Sans'（尙古黑體）、'Shanggu Serif'（尙古明體）、'LXGW WenKai TC'（霞鶩文楷）等。漢字由Ziano收錄的webfont承接，呈現未經各地標準改寫的傳承印刷形。
③ 系統日文字體：webfont載入失敗時的備援
webfont可能因離線、CDN故障等原因整體載入失敗，此時應避免回落至系統預設的國字標準字體字型。
- 避免使用蘋方、微軟正黑體、新細明體：這些字體採用國字標準字體的字形，正是Ziano要協助避免的方向。
- 改用日文系統字體：macOS／iOS內建的Hiragino、Windows內建的游ゴシック（YuGothic）／游明朝（YuMincho）。字形沉穩、適合印刷，是合理的備援選擇。順序為macOS字體（Hiragino）在前、Windows字體（Yu*）在後。
- 黑體鏈額外加入macOS上有附帶的Hiragino Sans GB：少數中文常用字（查、啟、鄉等）的日文版收錄於不同碼位，由GB版補足（雖為陸標字形，但僅用於離線備援，可接受）。明體無對應的GB版，故略。
④ generic結尾
sans-serif system-ui serif cursive等，交由用戶端預設字體承接，作為最後一層保障。
以CSS變量重用整條鏈
回落鏈較長，逐次手寫容易遺漏或順序出錯。建議定義一次，再以var()重複引用：
:root {
--font-system-ui:
'Avenir Next', 'Segoe UI Variable', 'Segoe UI', Roboto,
'Shanggu Sans',
'Hiragino Sans', 'Hiragino Sans GB', 'Yu Gothic',
system-ui, sans-serif
;
--font-sans-serif:
'Avenir Next', 'Segoe UI Variable', 'Segoe UI', Roboto,
'Shanggu Sans',
'Hiragino Sans', 'Hiragino Sans GB', 'Yu Gothic',
sans-serif
;
--font-serif:
Palatino, Cambria,
'Shanggu Serif',
'Hiragino Mincho ProN', 'Yu Mincho',
serif
;
--font-cursive:
Palatino, Cambria,
'LXGW WenKai TC',
'Klee One', Klee, 'Klee One',
BiauKai, DFKai-SB, 'Kaiti TC',
'Hiragino Mincho ProN', 'Yu Mincho',
cursive, serif
;
}
body { font-family: var(--font-sans-serif); } /* 黑體：內文、UI */
h1, .display { font-family: var(--font-serif); } /* 明體：大標 */
blockquote { font-family: var(--font-cursive); } /* 楷體：引文、詩句 */- 三個變量對應三種generic：
--font-sans-serif（黑體）、--font-serif（明體）、--font-cursive（楷體）。更換字族時只需修改:root一處，所有引用處會一併更新。 - 楷體（
--font-cursive）同樣前置西文serif。若偏好霞鶩文楷自帶的手寫感拉丁字母，移除Palatino, Cambria即可。
進階：固定不變的「日文字體＋generic」結尾也可獨立抽出，組合更為精簡：
:root {
--fallback-hei: 'Hiragino Sans', 'Hiragino Sans GB', 'Yu Gothic', sans-serif;
--fallback-ming: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
--font-sans-serif: 'Avenir Next', 'Segoe UI Variable', 'Segoe UI', 'Shanggu Sans', var(--fallback-hei);
--font-serif: Palatino, Cambria, 'Shanggu Serif', var(--fallback-ming);
}font-display：載入過程的行為
每個套件提供三種font-display入口，切換行為只需更換CSS檔名：
| 檔案 | 行為 | 適合 |
|---|---|---|
swap.css（預設） |
先以退化字形顯示，webfont載入後替換 | 一般內文，對內容遮擋最小 |
block.css |
短暫隱藏，待webfont載入後顯示 | 大標題，避免退化字形閃現 |
optional.css |
webfont未即時載入則本次不替換 | 重視CWV的頁面，零版位位移（CLS＝0） |
靜態字體（源起、霞鶩文楷等）可單獨載入指定字重：以swap/<字重>.css取代整族的swap.css，體積更小。可變字體（尙古）單一檔案即涵蓋完整字重軸，無需分檔。
本站為何等字體載入？
為完整展示傳承字形，本站刻意待字體就緒才顯示內容（設有超時保底）⸺這是展示櫥窗的堅持，不是對一般網站的建議。一般內容網站仍推薦使用font-dispaly: swap;。文字先見為快，字形隨後升級。
可變字體與靜態字體
可變字體（variable fonts）：單一檔案涵蓋整段字重軸（如250–900），拉字重不必換檔⸺尙古明體／黑體即是。
靜態字體（static fonts）：每個字重各一個檔（源起、霞鶩文楷等即是）。好處是可以只下載需要的字重⸺用 swap/<字重>.css 取代整族的 swap.css，下載更小。