技能使用指南

web-typography（网页排版）Skill 是什么？怎么用？

网页排版 Skill（web-typography）基于《On Web Typography》整理，帮你在选字体、评估可读性、配对字体、设定字号行高与行宽、构建类型层次和优化 Web 字体加载时拿到可执行建议与现成 CSS，并用 0-10 分评分指出差距。想让页面更好读、加载更快，现在就装上试试。

网页排版Skillweb-typography
8 个章节 约 15 分钟阅读 AI 智能生成

网页排版：让字体安静地服务内容，而不是抢走读者的注意力

核心结论速览

  • 技能中文名 网页排版，英文名 web-typography，技能 ID 12800，它把 Jason Santa Maria 的《On Web Typography》整理成一套可以直接执行的网页排版框架。
  • 覆盖 7 个环节：字体选择、字体评估、字体配对、排版度量（字号/行高/行宽）、类型层次结构、响应式排版与 Web 字体加载性能。
  • 自带 0-10 分评分机制，输出「当前得分 + 达到 10/10 的具体改进项」，把排版评审从「我觉得不好看」变成可逐条勾选的检查表。
  • 直接给出可复制的 CSS 片段，包括正文阅读节奏、clamp() 流体字号、font-display: swap 与预加载写法，开发者拿过来改改就能用。
  • 附带「常见错误表」和「快速诊断表」，适合在提测前做一次排版自检，也适合设计、产品与前端对齐同一套语言。

1. 该技能叫什么？如何一键安装 AI 技能提升开发效率？

技能基本信息

项目 内容
中文名 网页排版
英文名 web-typography
技能 ID 12800
版本与许可 版本 1.1.0，MIT 许可（作者 wondelai）
知识来源 Jason Santa Maria《On Web Typography》（A Book Apart，2014）

它解决什么问题？

网页排版最常见的困境不是「没有字体可用」，而是「不知道该怎么选、怎么调、怎么验证」。字号是 14px 还是 18px？行高该给 1.3 还是 1.6？一行到底多少个字才合适？标题层级靠大小拉开还是靠字重拉开？中文字体和西文字体怎么才能不打架？Web 字体一加载就闪一下白屏怎么办？这些问题以往只能靠经验、靠翻规范、靠设计师肉眼判断，而这个技能把它们整理成一条条可以对照执行的判据，并给出具体的 CSS 落地方案。

一键安装的思路与步骤

该技能以技能包形式提供（技能详情中标注了 MIT 许可与版本号）。具体的安装命令、技能市场入口与目录路径会因所使用的 AI 客户端不同而不同，以下为通用流程，具体命令与入口以官方说明为准。

安装前提：

  1. 你使用的 AI 客户端或提效工具支持 Skill（技能）机制；
  2. 能访问技能市场，或已经拿到该技能包文件；
  3. 手边有一个正在开发或准备评审的页面、设计稿或样式文件，方便安装后立刻验证。

安装步骤：

  1. 定位技能：在技能市场/技能商店中搜索「网页排版」或「web-typography」，也可以直接通过技能 ID 12800 查找；
  2. 安装启用：点击安装并启用；如果平台支持手动导入，按官方说明把技能包放入指定技能目录后重新加载；
  3. 验证是否生效：新建一个对话，输入一段验证提示词，例如「请用网页排版技能检查这段正文 CSS：font-size:14px; line-height:1.3; width:100%，给出评分和改进建议」；
  4. 确认输出形态：如果返回结果中包含 0-10 分的评分、逐条差距说明以及可复制的 CSS 建议，说明技能已经正常工作；若没有结构化输出，则说明技能未加载成功，需要回到第 2 步排查。

一句话总结这种提效方式：把「排版顾问」固化成一个随时可调用的技能，不用每次都从零解释背景，省下的正是反复沟通和试错的时间。

2. 该技能的主要功能和特点

能做什么

  • 为正文、标题和 UI 选字体：先定义用途（正文/标题/界面元素），再匹配内容基调，强调「在实际使用尺寸下测试」，避免 72px 很好看、14px 却读不动的情况。
  • 评估字体质量：从技术质量（笔画一致、字偶对、字符集完整性、字重数量）、结构特征（x 高度、开放字怀、字母区分度如 Il1、O0、rn 与 m）、实用需求（文件体积、授权、渲染表现）三个维度做体检。
  • 字体配对：提供结构对比（衬线+无衬线）、字重对比、同源设计师、超级家族等配对策略，并列出典型配对错误。
  • 设定排版度量：正文字号下限 16px（阅读密集页面推荐 18px）、行宽 45-75 字符（66 字符最佳）、正文行高 1.4-1.8、标题行高 1.1-1.25，并给出 ch 单位与 max-width 的具体写法。
  • 构建类型层次结构：用大小、字重、颜色三个杠杆拉开层级，强调「相邻层级只动一到两个杠杆」，配合 1.2-1.5 的模块化比例与「眯眼测试」。
  • 响应式排版与字体性能：用 clamp() 实现流体字号，font-display: swap、<link rel="preload">、字体子集化、WOFF2 与可变字体控制加载体积，目标总字体负载在 200KB 以下。

和普通工具比强在哪

  • 有评分、有目标：直接以 10/10 为目标输出当前分数与差距清单，评审不再靠感觉。
  • 有诊断路径：内置「常见错误」与「快速诊断」两张表，比如「行太长难跟踪 → 加 max-width: 65ch」「字体加载慢 → 子集化 + font-display: swap + 预加载」，问题与修复一一对应。
  • 有伦理边界：明确反对为了视觉新奇牺牲可读性，也提醒不要为了性能砍掉非拉丁语系字符或斜体粗体，导致部分用户被排除在外。
  • 有可复用的知识分层：把排版拆成「瞬间类型」（标题、按钮、导航、标志，重个性）与「长期类型」（正文、文章、文档，重可读性），并给出「工作马字体」这一选型思路。

3. 如何使用该技能？

以下为典型使用流程，可按需裁剪。

第 1 步：先说清楚上下文 告诉技能你要处理的是「瞬间类型」还是「长期类型」，是什么类型的产品（内容站、SaaS 后台、电商、文档站、品牌官网）。上下文不同，判据完全不同。

第 2 步：提供真实内容 技能明确建议不要用占位文本测试，因为假文本会隐藏字符频率、词长和段落节奏的真实问题。把一段真实文案、真实标题、真实表格数据贴进去更有效。

第 3 步：提出具体请求 一次只问一类问题，输出会更聚焦。常见请求如下：

  • 「帮我评估这三个正文字体候选在屏幕上的可读性，重点看 x 高度和字母区分度」
  • 「我的正文是 15px、行高 1.35、容器宽度自适应全屏，请打分并给出改进方案」
  • 「标题用 Playfair Display，正文用什么搭配比较稳？给出两套方案和对应 CSS」
  • 「帮我把这套页面的字号体系改成 clamp() 流体方案，要求移动端正文不小于 17px」

第 4 步：读取结构化输出 典型输出会包含三块内容：① 0-10 分的当前评分；② 逐条差距说明与到 10/10 的具体动作；③ 可以直接复制的代码。例如改造正文阅读节奏时，技能给出的参考写法是：

.prose {
  font-size: 1.125rem;     /* 18px */
  line-height: 1.6;
  max-width: 65ch;
  letter-spacing: normal;  /* 正文不要强制加字距 */
}

再比如流体字号与字体加载：

body { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); }

@font-face {
  font-family: 'Custom Font';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

第 5 步：落地并回归验证 改完后按技能的「快速诊断」自查：正文是否 ≥16px、行宽是否 ≤75 字符、正文行高是否 ≥1.4、层级对比是否足够、总字体负载是否在 200KB 以下、是否每个 font-family 都配了回退字体、页面在 200% 浏览器缩放下是否正常。最后在真实设备与目标浏览器上再看一遍。

输入示例（可直接改写使用）

我在做一个技术博客，正文目前是 font-size:15px; line-height:1.4; max-width:900px，读者反馈看久了眼睛累。请用网页排版技能给出现状评分，并输出一版改进后的正文 CSS，同时说明移动端该怎么调。

输出预期：一份带分数的诊断 + 一份可直接替换的 CSS + 移动端断点建议 + 需要重点验证的风险点（如行宽是否受容器影响、字体是否已做子集化）。

4. 同类型竞品对比分析

方案名称 定位 核心功能 安装/使用门槛 适用场景 优势与不足
网页排版（web-typography）Skill 沉淀了成套判据的网页排版顾问 选字体、评字体、配字体、排版度量、层次结构、响应式与加载性能，含 0-10 评分与诊断表 需在支持技能的客户端安装启用，以官方说明为准；使用门槛低，会描述需求即可 前端自查、设计评审、内容站与产品页面改版 优势：判据具体、有评分、直接给 CSS；不足：偏方法论与实现建议，不替代真实用户测试与设计审美判断
通用大模型直接提问 通用对话能力 可回答排版问题，但答案质量随问法波动 无需安装，零门槛 临时问一两个小问题 优势：随手可用；不足：缺少统一评分标准与体系化检查清单，容易给出泛泛而谈的建议
公开设计系统与排版规范文档 体系化的规范参考 提供字号阶梯、间距规则、组件规范 需自行检索与理解，查阅成本较高 团队统一设计语言、组件库建设 优势：权威、成体系；不足：偏「规定是什么」，弱于「我这份代码现在差在哪、怎么改」
在线字体配对与字号阶梯生成工具 单点工具 生成字体搭配组合或字号比例表 网页即用，门槛低 快速找搭配灵感、算比例 优势：出结果快；不足：只管「搭配与比例」，不管可读性评估、行宽行高、加载性能与无障碍验证

对比结论：如果你只是想知道「这两个字体搭不搭」，单点工具够用；如果你需要的是「从选型到 CSS 落地到性能优化的一整条链路，并且能说清楚为什么」，那么网页排版技能这类成体系的技能更合适。

5. 该技能的典型应用场景与实际体验情况

场景一：前端开发者接手内容型站点

痛点是「页面能跑但不好读」：正文 14-15px、行宽拉满全屏、行高 1.3。使用方式是贴出现有 CSS 与一段真实文章，请技能打分并给出改造方案。实际体验下来，最容易见效的三处改动是：把正文提到 18px、给正文容器加 max-width: 65ch、行高提到 1.6。上手难度低，注意事项是改造后一定要用真实文案复测，短文案看不出行宽问题。

场景二：SaaS 产品做后台与仪表盘

后台属于典型的「扫描型阅读」，需要的是快速识别而非沉浸阅读。技能给出的思路是用字重和颜色区分「数据值」与「标签」（如数值用加粗深色、标签用常规灰色），表格单元格行高收紧到 1.3 左右，同时保证数字格式一致以便横向比较。体验上，这类改动不涉及大改版，落地成本低，但收益直观——信息密度上来了，误读率下降。

场景三：设计或品牌方推进字体选型决策

最难的不是选字体，而是说服利益相关者。技能的「目的驱动选择」思路让方案可以用清晰推理陈述，而不是「我觉得好看」。做法是先定义字体要承担的工作（正文/标题/UI），再从基调、实际尺寸表现、字族完整性、授权与文件体积几个维度逐条打分。注意事项：授权一定要在实施前确认，技能里也特别提示了未授权字体的法律风险。

场景四：无障碍与性能双重要求的项目

一方面要满足 200% 缩放可用、链接在正文中可辨识、低视力用户能读；另一方面字体加载不能拖慢首屏。技能把这两件事放在同一个框架里：流体字号解决缩放与适配，font-display: swap + 预加载 + 子集化解决加载阻塞，同时提醒子集化不要过度、别把非拉丁字符和斜体粗体砍掉。体验上，这部分最像一份「上线前检查清单」，照着过一遍就能排掉大部分坑。

6. 该技能能为用户带来的价值

效率层面：把「查资料—试错—再查资料」的循环压缩成一次对话。原本需要翻规范、开设计软件对比、来回改三版 CSS 才能定的正文字号与行高，现在可以在一次交互里拿到评分、差距清单和可复制代码，评审会也从「审美争论」变成「逐条核对」。

门槛层面：排版长期被视为需要多年经验的手艺。技能把这件事拆成可学习的判据——16px 起步、65ch 行宽、1.6 行高、1.2-1.5 的层级比例、200KB 字体预算——让没有排版背景的开发者也能做出合格的阅读体验。

可量化的收益：正文字号从 14px 提到 18px、行宽从全屏收敛到 65ch、正文行高从 1.3 提到 1.6、字体总负载控制在 200KB 以下、每个字体声明都带系统回退——这些都是可以被检查、被记录、被复测的指标。技能本身的 0-10 分评分，也让「这次改版到底改善了没有」有了前后对比的抓手。

长期价值：技能背后是一套稳定的判断标准，而不只是一个模板。掌握这套标准之后，无论项目换成中文内容站、英文 SaaS 还是移动端应用，选字体、配字体、定度量、做层次的思路都能迁移复用，团队也能因此建立统一的排版语言。

7. 常见问题 FAQ

Q1：怎么安装这个技能？需要付费吗？

在支持技能机制的 AI 客户端中，通过技能市场搜索「网页排版」或「web-typography」，或按技能 ID 12800 定位后安装启用即可；如果平台支持手动导入，按官方说明放入技能目录。技能详情标注的许可是 MIT。至于具体安装命令、入口路径以及是否涉及付费，以官方说明为准。

Q2：装上之后怎么确认它真的生效了？

给它一个具体的小任务验证，例如「检查这段正文 CSS 并打分：font-size:14px; line-height:1.3; width:100%」。如果返回了 0-10 的评分、明确的差距说明和可复制的 CSS 建议，就说明技能在工作；如果只是泛泛而谈，建议检查技能是否启用或重新加载。

Q3：它适合谁用？我是后端/产品，不懂 CSS 能用吗？

适合前端开发者、设计师、产品经理，以及任何需要为页面「把文字做得更好读」的人。不懂 CSS 也能用——你可以只描述现状（比如「正文 14 号字，屏幕宽的时候一行字特别长」），让它给出方向性建议和可直接交给前端的代码。当然，最终落地仍需要有人核对样式。

Q4：它和直接问大模型、或者查设计规范有什么区别？

直接问大模型，答案质量取决于你的问法，且缺少统一评分标准；查设计规范能知道「规定是什么」，但很难回答「我这份代码现在差在哪、怎么改」。网页排版技能的价值在于把两者接上了：既有体系判据，又能针对你的具体代码给分数、给差距、给 CSS。

Q5：用了它是不是就不需要做用户测试了？

不是。技能提供的是基于阅读机制与排版原则的判据（眼跳、注视、词形识别、易认性与可读性的区别），能帮你排掉绝大多数明显问题，但它不能替代真实用户、真实设备、真实距离下的验证。尤其是移动端阅读，建议始终用真实用户在实际场景中测一遍，再结合技能给出的检查清单做终检。