Preview Updated 2026-05-10

Typography 文本

Heading / Text / Paragraph 三个原语，所有字号都绑定 design token（--t-48 … --t-11）。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

何时使用

营销页 / 文档 / 任何承担”标题—段落—内联文字”层级的页面。
不要在按钮、Tag、表单 label 里使用：这些组件已经把字号锁定到了 --ui-size，再嵌一层 <CfText> 只会重复样式。
三类各自负责：
- CfHeading — <h1> 到 <h6> 的语义标题；6 个 level 对应 6 个字号 token。
- CfText — 行内文本片段，默认 <span>，可换 tag="strong" / tag="em" / tag="label"。
- CfParagraph — 段落 <p>，自动 margin-block-end 与多行 line-clamp。

基础用法

背景视口

H1 · 主标题（--t-48）

H2 · 章节（--t-40）

H3 · 小节（--t-32）

H4 · 子小节（--t-28）

H5（--t-22）

H6（--t-18）

Paragraph 默认 14px / 行高 1.6，承担正文叙述。后置加粗强调和 accent 色片段，都不破坏段落节奏。

xs 11pxsm 12pxmd 14pxlg 16pxxl 18px

mutedsubtle（仅装饰文本，对比 ≈ 3.4）successwarningerror

src/App.vue

<script setup lang="ts">
import { CfHeading, CfText, CfParagraph } from '@chufix-design/vue';
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <CfHeading :level="1">H1 · 主标题（--t-48）</CfHeading>
    <CfHeading :level="2">H2 · 章节（--t-40）</CfHeading>
    <CfHeading :level="3">H3 · 小节（--t-32）</CfHeading>
    <CfHeading :level="4">H4 · 子小节（--t-28）</CfHeading>
    <CfHeading :level="5">H5（--t-22）</CfHeading>
    <CfHeading :level="6">H6（--t-18）</CfHeading>
    <CfParagraph>
      Paragraph 默认 14px / 行高 1.6，承担正文叙述。后置 <CfText weight="semibold">加粗强调</CfText> 和
      <CfText variant="accent">accent 色片段</CfText>，都不破坏段落节奏。
    </CfParagraph>
    <div style="display: flex; gap: 16px; align-items: baseline;">
      <CfText size="xs">xs 11px</CfText>
      <CfText size="sm">sm 12px</CfText>
      <CfText size="md">md 14px</CfText>
      <CfText size="lg">lg 16px</CfText>
      <CfText size="xl">xl 18px</CfText>
    </div>
    <div style="display: flex; gap: 16px;">
      <CfText variant="muted">muted</CfText>
      <CfText variant="subtle">subtle（仅装饰文本，对比 ≈ 3.4）</CfText>
      <CfText variant="success">success</CfText>
      <CfText variant="warning">warning</CfText>
      <CfText variant="error">error</CfText>
    </div>
  </div>
</template>

<script setup>
import { CfHeading, CfText, CfParagraph } from '@chufix-design/vue';
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <CfHeading :level="1">H1 · 主标题（--t-48）</CfHeading>
    <CfHeading :level="2">H2 · 章节（--t-40）</CfHeading>
    <CfHeading :level="3">H3 · 小节（--t-32）</CfHeading>
    <CfHeading :level="4">H4 · 子小节（--t-28）</CfHeading>
    <CfHeading :level="5">H5（--t-22）</CfHeading>
    <CfHeading :level="6">H6（--t-18）</CfHeading>
    <CfParagraph>
      Paragraph 默认 14px / 行高 1.6，承担正文叙述。后置 <CfText weight="semibold">加粗强调</CfText> 和
      <CfText variant="accent">accent 色片段</CfText>，都不破坏段落节奏。
    </CfParagraph>
    <div style="display: flex; gap: 16px; align-items: baseline;">
      <CfText size="xs">xs 11px</CfText>
      <CfText size="sm">sm 12px</CfText>
      <CfText size="md">md 14px</CfText>
      <CfText size="lg">lg 16px</CfText>
      <CfText size="xl">xl 18px</CfText>
    </div>
    <div style="display: flex; gap: 16px;">
      <CfText variant="muted">muted</CfText>
      <CfText variant="subtle">subtle（仅装饰文本，对比 ≈ 3.4）</CfText>
      <CfText variant="success">success</CfText>
      <CfText variant="warning">warning</CfText>
      <CfText variant="error">error</CfText>
    </div>
  </div>
</template>

import { CfHeading, CfParagraph, CfText } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfHeading level={1}>主标题</CfHeading>
      <CfHeading level={3}>小节标题</CfHeading>
      <CfParagraph>段落正文。<CfText variant="accent">accent 片段</CfText></CfParagraph>
    </>
  );
}

import { CfHeading, CfParagraph, CfText } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfHeading level={1}>主标题</CfHeading>
      <CfHeading level={3}>小节标题</CfHeading>
      <CfParagraph>段落正文。<CfText variant="accent">accent 片段</CfText></CfParagraph>
    </>
  );
}

API · CfHeading

属性	类型	默认值	说明
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	渲染为 `<h{level}>`，对应字号 48/40/32/28/22/18
`weight`	`'regular' \| 'medium' \| 'semibold' \| 'bold'`	`'semibold'`
`variant`	`'default' \| 'muted' \| 'subtle' \| 'accent' \| 'success' \| 'warning' \| 'error'`	`'default'`	颜色 tone
`align`	`'start' \| 'center' \| 'end' \| 'justify'`	`'start'`
`truncate`	`boolean`	`false`	单行 ellipsis

API · CfText

属性	类型	默认值	说明
`tag`	`'span' \| 'p' \| 'div' \| 'label' \| 'strong' \| 'em'`	`'span'`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	对应 11/12/14/16/18
`variant`	同 Heading
`weight`	同 Heading
`truncate`	`boolean`	`false`

API · CfParagraph

属性	类型	默认值	说明
`size` / `variant` / `weight` / `align`	同 Text
`lineClamp`	`number`	`0`	`>0` 启用多行 ellipsis，line-clamp 行数

关于 `variant="subtle"`

⚠️ --fg-3 对 --bg-1 的对比度仅 ≈ 3.4–3.5（低于 WCAG AA 的 4.5）。请只用于 辅助/装饰文本（hint / caption / placeholder），不要承载关键信息。