前言¶

寫 Web 頁面時，字體相關的問題通常不會讓頁面報錯，只會讓頁面變難讀：正文和標題用了同一套字，層級拉不開；爲了一個特殊字體把整個字體文件塞進頁面，首屏白屏幾秒；中文字體體積大，加載策略和拉丁文字完全不同。這類問題排查起來瑣碎，因爲最終效果取決於字重、字號、行高、字距的組合，而不是某一行代碼。

下面介紹的這個 Skill 把字體相關的決策集中到一處，適合在寫頁面結構階段就參考，而不是等排版出問題再回頭改。

這是什麼¶

「排版與字體設計」是一個面向前端開發與設計交付的 Skill，座標 @kunlungrowth/typography-guide，當前版本 1.0.0，由「崑崙增長」發佈，來源標記爲 enterprise，分類在 design-media。

它要解決的問題是：給定一個頁面，如何選字體配對、如何定層級、如何保證可讀性、以及如何讓 Web 字體加載不拖慢頁面。簡介給出的四個能力點就是這四件事：字體配對、層級、可讀性、Web 字體加載優化。

需要說明的是，官方簡介只給出這四點，沒有展開成可執行的指令列表。如果你需要的是精確到某條規則的判斷，需要打開頁面覈對具體內容。

核心功能¶

1、字體配對：爲正文和標題挑選能搭配的字體組合，避免全文只有一種字體時層級模糊。

2、層級：通過字號、字重、行高的搭配建立清晰的標題與正文關係。

3、可讀性：關注行長、行高、字號下限、中文與拉丁文混排時的對齊與間距。

4、Web 字體加載優化：控制字體文件的體積與加載時機，避免字體阻塞首屏渲染。

前三項偏設計決策，第四項偏工程實現。這個 Skill 的價值在於把這兩類問題放在同一份材料裏處理，而不是分開查兩份文檔。

安裝與啓用¶

該 Skill 基於通用 SKILL.md 格式，通過 SkillHub 分發。官方地址是 https://api.skillhub.cn/kunlungrowth/typography-guide，頁面地址是 https://www.skillhub.cn/skills/kunlungrowth/typography-guide。

關於安裝方式，公開資料中沒有給出可覈實的命令、目錄路徑或配置文件字段，因此這裏不提供安裝命令。可用的核對信息是：

• 座標：@kunlungrowth/typography-guide
• 版本：1.0.0
• 來源：enterprise
• 分類：design-media
• 是否需要 API Key：requires_api_key=false
• 發佈者：崑崙增長

如果你使用 Cursor、Codex CLI 或 Claude Code 等工具加載 Skill，各工具對 SKILL.md 的讀取位置和啓用方式並不一致。在沒有官方說明的情況下，不要照着網上針對其他 Skill 的命令直接執行，先確認當前工具是否支持從 SkillHub 引入，以及引入後文件落在哪個目錄。

典型用法¶

官方資料沒有提供可復現的示例代碼或配置文件。基於該 Skill 覆蓋的四個主題，實際使用時可以按下面的方式組織工作：

1、在寫頁面結構之前，先確定正文字體和標題字體的組合，以及對應的字重，而不是等樣式寫完再選。

2、用設計變量而不是散落的字面值定義字號和行高，這樣層級調整時只改一處。

3、引入自定義字體時，區分首屏需要的字體和首屏之後纔用到的字體，後者可以延遲加載。

4、中文字體文件通常遠大於拉丁字體文件，加載策略需要單獨考慮，不能直接套用英文站點的字體方案。

這四條是通用做法，用於理解該 Skill 覆蓋的問題範圍，不是該 Skill 自帶的指令。具體判斷仍需打開頁面覈對。

適用場景與注意¶

適合的場景：

• 新建頁面或組件，需要一次性確定字體方案。
• 現有頁面可讀性不佳，但不確定是字號、行高還是字體本身導致的。
• 準備引入自定義字體，想先理清加載順序和體積控制。

需要注意的地方：

• 該 Skill 分類在 design-media，產出偏向設計決策，不涉及後端邏輯或數據結構。
• 簡介未說明是否覆蓋響應式排版、暗色模式、CJK 與拉丁文混排的具體規則，這些是否需要，要打開頁面確認。
• 字體加載優化的實際效果依賴瀏覽器環境和字體文件本身，Skill 提供的是決策框架，不是通用的加載代碼。
• 頁面顯示的評分和下載量會隨時間變化，引用時以打開頁面時的數據爲準。

小結¶

這個 Skill 的價值在於把字體配對、層級、可讀性和加載優化四件事集中到一份材料裏，讓前端在寫頁面結構階段就能照着檢查，而不是等排版效果出來再返工。它沒有給出完整指令清單，因此適合作爲決策參考，不適合當作一鍵套用的配置模板。

官方地址：https://api.skillhub.cn/kunlungrowth/typography-guide