--- localeCode: zh-CN order: 18 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 应用。
); } ``` ### 数值组件 Numeral 组件在Text组件的基础上，添加了属性: `rule`, `precision`, `truncate`, `parser`, 以提供需要单独处理文本中数值的能力。 Numeral 组件会递归遍历 Children 检测其中所有的数字文本进行转换展示，请注意控制渲染结构层级；
对于 rule 为 percentage 的 Numeral 组件，数据处理规则有变化。在 v2.22.0-v2.29.0 中，对于绝对值大于等于 1 的 num，结果为 num%； 对于绝对值小于等于 1 的 num，结果为 (num*100)%。在 v2.30.0 版本及之后统一为 (num*100)%。 `precision` 可以设置小数点后保留位数, 用于设置精度 `truncate` 小数点后保留位截段取整方式，可选 `ceil`, `floor`, `round`，作用与 Math.ceil、Math.floor、Math.round 对齐 `rule` 用于设置解析规则 - 设为 `percentages` 会将数字自动转换为百分比形式展示 - 设为 `bytes-decimal` 会将数字自动换算为字节对应的单位展示， 1 KB 定义为等于 1000 字节，（B, KB, MB, GB, TB, PB, EB, ZB, YB） - 设为 `bytes-binary` 会将数字自动换算为字节对应的单位展示，1 KiB 定义为等于 1024字节，（B, KiB, MiB, GiB, TiB, PiB, EiB, ZiB, YiB） - 设为 `text`时，仅自动对数字进行取整，根据 `precision` 和 `truncate` 属性 - 设为 `numbers`时，会将非数字字符进行过滤，仅展示数字 - 设为 `exponential` 时,会将数字自动转换为科学计数法形式展示 ```jsx live=true import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Numeral } = Typography; return (

点赞量：1.6111e1 K

播放量: 2.4444e2 K

好评率: 0.915

 这场比赛我的胜率是0.6，输的概率是0.4

已使用: 1000

未使用: {1024*1000}

已使用: 1024

未使用: {2e12}
); } ``` 可以通过 `parser` 自定义解析规则 ```jsx live=true import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Numeral } = Typography; function parserTCH(oldVal) { return oldVal.split(' ').map(item => Number(item) ? `${item.replace(/(\d)(?=(?:\d{3})+(?:\.|$))/g, '$1,')}+` : item ).join(' '); } function Infos() { const data = [ { type: 'Stars', min: '6700' }, { type: 'Fork', min: '500' }, { type: 'Downloads', min: '3000000' }, { type: 'Contributors', min: '90' } ]; return data.map(item =>

{item.type}： {item.min}

); } return (
Semi Design 重视我们的用户，加入并助力我们不断完善 {Infos}
现已服务 {1e5} 用户，前往官网 >>
); } ``` ### 文本大小 段落组件和文本组件支持两种尺寸，`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'; import { IconSetting } from '@douyinfe/semi-icons'; function Demo() { const { Paragraph, Text, Numeral } = Typography; return (
点击右边的图标复制文本。 点击复制文本。 Toast.success({ content: '复制文本成功' }) }}>点击右边的图标复制文本。 时间戳: {new Date().getTime()/1000}s }}>自定义复制节点

粘贴区域：