⚡

定义字体排版系统Skill define-typography

此技能用于定义和生成全面的字体排版系统，包括字体比例、文本样式、响应式规则和CSS代码。它支持模块化、音乐和自定义比例，适用于博客、应用和营销等场景，确保可访问性和设计一致性。关键词：字体排版、模块化比例、文本样式、响应式设计、CSS、前端开发、设计系统、可访问性。

前端开发 0 次安装 0 次浏览 更新于 3/11/2026

name: define-typography description: 定义字体排版比例和文本系统。创建模块化比例、文本样式和响应式字体排版。 argument-hint: [–scale modular|musical|custom] [–base-size 16] [–ratio 1.25] allowed-tools: Read, Glob, Grep, Task, Skill, AskUserQuestion

定义字体排版命令

设计一个全面的字体排版系统，包括比例、样式和响应式规则。

用法

/cms:define-typography --scale modular --ratio 1.25
/cms:define-typography --scale musical --base-size 18
/cms:define-typography --scale custom

比例选项

  • modular：数学比例，具有一致的比率
  • musical：基于音乐间隔（完美四度、大三度）
  • custom：用户定义的大小

常见比率

名称 比率 使用案例
小秒 1.067 微妙、最小化
大秒 1.125 微妙层次
小三度 1.200 适合正文
大三度 1.250 多功能（默认）
完美四度 1.333 强层次
增四度 1.414 大胆、戏剧性
完美五度 1.500 非常戏剧性
黄金比例 1.618 经典、优雅

工作流程

步骤 1：解析参数

从命令中提取比例类型、基础大小和比率。

步骤 2：收集需求

使用 AskUserQuestion 来理解：

  • 主要阅读上下文是什么（博客、应用、营销）？
  • 目标设备是什么？
  • 是否有现有的品牌字体需要整合？
  • 期望的视觉个性是什么？

步骤 3：调用技能

调用 design-token-management 技能以生成令牌。

步骤 4：生成字体比例

模块化比例（1.25 比率，16px 基础）：

typography:
  base_size: 16
  ratio: 1.25
  unit: rem

  scale:
    # 计算：基础 * 比率^n
    xs:     # 16 / 1.25^2 = 10.24 → 0.64rem
      size: 0.64rem
      line_height: 1.5

    sm:     # 16 / 1.25 = 12.8 → 0.8rem
      size: 0.8rem
      line_height: 1.5

    base:   # 16 = 1rem
      size: 1rem
      line_height: 1.5

    lg:     # 16 * 1.25 = 20 → 1.25rem
      size: 1.25rem
      line_height: 1.4

    xl:     # 16 * 1.25^2 = 25 → 1.563rem
      size: 1.563rem
      line_height: 1.3

    2xl:    # 16 * 1.25^3 = 31.25 → 1.953rem
      size: 1.953rem
      line_height: 1.3

    3xl:    # 16 * 1.25^4 = 39.06 → 2.441rem
      size: 2.441rem
      line_height: 1.2

    4xl:    # 16 * 1.25^5 = 48.83 → 3.052rem
      size: 3.052rem
      line_height: 1.1

    5xl:    # 16 * 1.25^6 = 61.04 → 3.815rem
      size: 3.815rem
      line_height: 1.1

步骤 5：定义文本样式

语义文本样式：

text_styles:
  # 标题
  display:
    font_family: "{fonts.heading}"
    font_size: "{scale.5xl}"
    font_weight: 800
    line_height: 1.1
    letter_spacing: -0.02em
    text_transform: none
    responsive:
      mobile:
        font_size: "{scale.3xl}"

  h1:
    font_family: "{fonts.heading}"
    font_size: "{scale.4xl}"
    font_weight: 700
    line_height: 1.2
    letter_spacing: -0.02em
    margin_bottom: "{spacing.4}"
    responsive:
      mobile:
        font_size: "{scale.2xl}"

  h2:
    font_family: "{fonts.heading}"
    font_size: "{scale.3xl}"
    font_weight: 700
    line_height: 1.2
    letter_spacing: -0.01em
    margin_bottom: "{spacing.3}"
    responsive:
      mobile:
        font_size: "{scale.xl}"

  h3:
    font_family: "{fonts.heading}"
    font_size: "{scale.2xl}"
    font_weight: 600
    line_height: 1.3
    margin_bottom: "{spacing.2}"

  h4:
    font_family: "{fonts.heading}"
    font_size: "{scale.xl}"
    font_weight: 600
    line_height: 1.3
    margin_bottom: "{spacing.2}"

  h5:
    font_family: "{fonts.heading}"
    font_size: "{scale.lg}"
    font_weight: 600
    line_height: 1.4

  h6:
    font_family: "{fonts.heading}"
    font_size: "{scale.base}"
    font_weight: 600
    line_height: 1.4
    text_transform: uppercase
    letter_spacing: 0.05em

  # 正文文本
  body:
    font_family: "{fonts.body}"
    font_size: "{scale.base}"
    font_weight: 400
    line_height: 1.6
    color: "{colors.text.primary}"

  body_large:
    font_family: "{fonts.body}"
    font_size: "{scale.lg}"
    font_weight: 400
    line_height: 1.5
    color: "{colors.text.primary}"

  body_small:
    font_family: "{fonts.body}"
    font_size: "{scale.sm}"
    font_weight: 400
    line_height: 1.5
    color: "{colors.text.secondary}"

  # 特殊文本
  lead:
    font_family: "{fonts.body}"
    font_size: "{scale.xl}"
    font_weight: 400
    line_height: 1.5
    color: "{colors.text.secondary}"

  caption:
    font_family: "{fonts.body}"
    font_size: "{scale.xs}"
    font_weight: 400
    line_height: 1.4
    color: "{colors.text.tertiary}"
    text_transform: uppercase
    letter_spacing: 0.05em

  label:
    font_family: "{fonts.body}"
    font_size: "{scale.sm}"
    font_weight: 500
    line_height: 1.4

  code:
    font_family: "{fonts.mono}"
    font_size: 0.875em
    font_weight: 400
    background: "{colors.bg.code}"
    padding: 0.125em 0.25em
    border_radius: "{radii.sm}"

  blockquote:
    font_family: "{fonts.body}"
    font_size: "{scale.lg}"
    font_style: italic
    line_height: 1.6
    border_left: 4px solid "{colors.brand.primary}"
    padding_left: "{spacing.4}"
    margin: "{spacing.6} 0"

步骤 6：生成 CSS

CSS 输出：

/* 字体排版比例 */
:root {
  --font-size-xs: 0.64rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.563rem;
  --font-size-2xl: 1.953rem;
  --font-size-3xl: 2.441rem;
  --font-size-4xl: 3.052rem;
  --font-size-5xl: 3.815rem;

  --font-family-heading: 'Inter', system-ui, sans-serif;
  --font-family-body: 'Inter', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;
}

/* 文本样式类 */
.text-display {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.text-body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.6;
}

.text-lead {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xl);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* 响应式字体排版 */
@media (max-width: 768px) {
  .text-display {
    font-size: var(--font-size-3xl);
  }

  .text-h1 {
    font-size: var(--font-size-2xl);
  }
}

/* 长文内容 */
.prose {
  font-family: var(--font-family-body);
  font-size: var(--font-size-lg);
  line-height: 1.7;
  max-width: 65ch;
}

.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: var(--font-family-heading);
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.prose p {
  margin-bottom: 1.25em;
}

.prose code {
  font-family: var(--font-family-mono);
  font-size: 0.875em;
  background: var(--color-bg-code);
  padding: 0.125em 0.25em;
  border-radius: 0.25rem;
}

步骤 7：字体加载策略

字体配置：

fonts:
  strategy: swap  # font-display 值

  families:
    - name: Inter
      source: google  # 或自托管、adobe
      weights: [400, 500, 600, 700, 800]
      styles: [normal, italic]
      subsets: [latin, latin-ext]
      preload: true
      variable: true

    - name: JetBrains Mono
      source: google
      weights: [400, 700]
      styles: [normal]
      subsets: [latin]
      preload: false

  loading:
    preload_critical: true
    preconnect: true
    subset_critical: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"

  fallbacks:
    sans: "system-ui, -apple-system, sans-serif"
    serif: "Georgia, Times New Roman, serif"
    mono: "Menlo, Monaco, Consolas, monospace"

HTML 头部：

<!-- 预连接到字体源 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- 预加载关键字体 -->
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>

<!-- 加载字体并显示交换 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

可访问性

字体排版必须满足 WCAG 要求：

要求 指南
最小正文大小 16px (1rem)
行高 正文文本至少 1.5
行长度 45-75 字符最佳
对比度比率 正常文本 4.5:1，大文本 3:1
缩放支持 文本必须能放大到 200%

相关技能

  • design-token-management - 令牌架构
  • multi-site-theming - 主题集成