--- localeCode: zh-CN order: 17 category: 基础 title: Typography 版式 icon: doc-typography brief: 文字，图片，段落的基本格式。 --- ## 使用场景 - 对文章、博客、日志等的文本内容进行展示时。 - 对文本进行复制和省略等基础操作时。 ## 代码演示 ### 如何引入 ```jsx import import { Typography } from '@douyinfe/semi-ui'; ``` ### 标题组件 通过设置 heading 可以展示不同级别的标题。 ```jsx live=true import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Title } = Typography; return (
h1. Semi Design h2. Semi Design h3. Semi Design h4. Semi Design h5. Semi Design h6. Semi Design
); } ``` ### 文本组件 内置不同样式的文本。可以通过 `icon` 属性传入图标，这种方式传入的图标默认与文本有间距，同时在链接文本的情况不会出现下划线符合设计规范。 ```jsx live=true import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Text } = Typography; return (
Text

Secondary

{`Tertiary v>=1.2.0`}

{`Quaternary v>=1.2.0`}

Warning

Danger

{`Success v>=1.7.0`}

Disabled

Default Mark

Example Code

Underline

Deleted

Strong
); } ``` 链接文本支持传入 `object`，将对应的属性挂在 `` 标签上。 **v>=1.0** 后默认不再有下划线，可以配合 underline 属性在 hover，active 态增加下划线的样式。 ```jsx live=true import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; import { IconLink } from '@douyinfe/semi-icons'; function Demo() { const { Text } = Typography; return (
链接文本

打开网站

} underline>带下划线的网页链接
); } ``` ### 段落组件 段落组件拥有两种行距，可以通过设置 `spacing='extended'` 使用更宽松的行距。 ```jsx live=true import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Paragraph, Title } = Typography; return (
默认行距 Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
宽松行距 Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
); } ``` ### 文本大小 段落组件和文本组件支持两种尺寸，`small`（12px） 和 `normal`（14px），默认为`normal`。 ```jsx live=true import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Paragraph, Text } = Typography; return (
正常文本 Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
小文本 Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
); } ``` ### 可交互文本 支持文本的复制。 ```jsx live=true import React from 'react'; import { Typography, TextArea } from '@douyinfe/semi-ui'; function Demo() { const { Paragraph, Text } = Typography; return (
点击右边的图标复制文本。 点击复制文本。 Toast.success({ content: '复制文本成功'}) }}>点击右边的图标复制文本。
粘贴区域：