前言¶

写 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