# @asphalt-react/typography 中文文档 规范地址：https://npmcn.com/package/%40asphalt-react/typography/ 版本：2\.19\.0 npm 元数据更新时间：2026-10-29T07:09:28.289Z 中文译文更新时间：2026-11-08T01:02:57.377Z 软件包许可：UNLICENSED 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40asphalt-react/typography 原文对照：https://npmcn.com/package/%40asphalt-react/typography/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：32.8 kB，6 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：3 个 - peer 依赖：react \>= 16\.8\.2 - 首次发布：2023-04-13T11:55:46.228Z - 最新版本发布：2026-10-29T07:09:28.092Z - 近 30 天下载量：1956（2026-10-07 至 2026-11-05，npm 官方下载统计） - 已发布版本数：30（近 12 个月 12 个） ## 中文简介 类型 ## 安装 ```sh npm install @asphalt-react/typography ``` 也可以使用：`pnpm add @asphalt-react/typography`、`yarn add @asphalt-react/typography`、`bun add @asphalt-react/typography` ## README # 类型 ![npm](https://img.shields.io/npm/dt/@asphalt-react/typography?style=flat-square) [![npm version](https://badge.fury.io/js/@asphalt-react%2Ftypography.svg)](https://badge.fury.io/js/@asphalt-react%2Ftypography) 字法有助于建立分级,并清晰地沟通文本内容. 语义学和视觉学的文字学部分摘要。 一些Typtography组件可以有语义上的含义附着在它上. 类型组件控制 [字体](https://developer.mozilla.org/en-US/docs/Web/CSS/font) 属性,其他适用样式由全局或用户代理样式继承. 为了得到更多的控制,在母容器中应用样式. 打字组件的目的是为了能够添加可主题的文本内容. 您可以使用 HTML [文本内容](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#text_content) 财务报告和审定财务报表 [内容部分](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning) 来组织内容的块或部分. 使用 HTML 语言 [内置文本语义](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#inline_text_semantics) 定义一个单词、行或任意文本的含义、结构或样式. ## 使用量 ```js import {Heading, Display, Code, Text} from '@asphalt-react/typography' The quick brown fox jumps The quick brown fox jumps npm install @asphalt-react/typography The quick brown fox jumps I have a higher font weight than Text ``` ## 意图 这个 `Heading`, (中文(简体) ), `Display` 打开 `Text` 组件有5个意图来代表不同的内容等级和使用: - **小学**:这是默认的意向并具有最高等级. - **中学**:此意向表示副本的等级比"主"低. - **哑巴**:此意图具有最下层的分级,并可用于显示副本,应能得到最少用户的注意. - **品牌**:此意向凸显出密切代表品牌的复制品. - **布兰德**:这个意图对于在有名的有色地表面提供一份副本是有用的. 这种意图确保了与品牌颜色的适当对比比. `Text` 额外支持四个语义意图 状态和反馈消息 : - **资讯**: 一个通用的信息信息. - **成功**:具有成功意图的信息. - **警告**:具有警告意图的信息;需要更多的关注而不是信息. - **危险**:最需要注意的关键信息。 用于信息导致破坏行动,如删除用户. # 标题 使用 `Heading` 代表本节标题内容,它支持所有6个级别的本节标题 `h1` 直至 `h6`。 。 。 . ## Figma Token 绘图 每个标题级别映射到一个Figma令牌及其相应的CSS自定义属性: | Prop | HTML 标记 | 图片图文 | | --- | --- | --- | | (单位:千美元) | `

` | 标题2/XL | | 页:1 | `

` | 标题/XL | | h3 (韩语) | `

` | 标题/ L | | h4 (中文(简体) ) | `

` | 标题/管理 | | h5 (韩语) | `

` | 标题/ 页:1 | | 小时6 | `
` | 标题/XS | ## 道具 ### 儿童 标题内容的反应节点 . | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 节点 | 真实 | 不详 | ### (单位:千美元) 将内容修改为 h1 节标题 . | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 页:1 将内容修改为 h2 节标题 . | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### h3 (韩语) 将内容修改为 h3 节标题 . | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### h4 (中文(简体) ) 将内容修改为 h4 节标题 . | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### h5 (韩语) 将内容渲染为h5节标题. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 小时6 将内容修改为 h6 节标题 . | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 小学 将文字以初意为出. 这是默认意图. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 中学 以二义而作文字. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 品牌 以品牌为意向来将文字渲染. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 布兰德 将文本与具有品牌颜色的背景相对应. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 哑巴 以微弱的意向渲染文字. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | # 显示 使用 `Display` 更加强调文本。 用它来显示英雄或营销文本. 默认显示使内容在 `p` 标记,您也可以选择在 `div` 或者说 `span` 换句话说. ## 道具 ### 儿童 显示内容的反应节点 . | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 节点 | 真实 | 不详 | ### 大小 控制显示大小. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 语句 | 虚假 | "m" (英语) | ### 页:1 将显示内容以 `p` 标签. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 间距 将显示内容以 `span` 标签. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 数字 将显示内容以 `div` 标签. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 小学 将文字以初意为出. 这是默认意图. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 中学 以二义而作文字. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 品牌 以品牌为意向来将文字渲染. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 布兰德 以适当的对比比对有品牌色彩的背景进行文字渲染. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 哑巴 以微弱的意向渲染文字. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | # 代码 `Code` 样式文本内容,意在表明文本是计算机代码的短片或片段. ## 道具 ### 儿童 代码内容的反应节点. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 节点 | 真实 | 不详 | ### 大小 控制代码内容的大小. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 语句 | 虚假 | "m" (英语) | # 文本 使用 `Text` 以生成通用文本内容. 默认文本使文本在 `p` 标记,您也可以选择在 `div` 或者说 `span` 换句话说. ## 道具 ### 儿童 文本内容的反应节点. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 节点 | 真实 | 不详 | ### 大小 控制文本的大小. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 语句 | 虚假 | "m" (英语) | ### 粗体 将粗体变体渲染. 粗体变体只支持"x","s","m"和"l"大小. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 不详 | ### 页:1 将内容变成 `p` 标签. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 间距 将内容变成 `span` 标签. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 数字 将内容变成 `div` 标签. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 小学 将文字以初意为出. 这是默认意图. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 中学 以二义而作文字. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 品牌 以品牌为意向来将文字渲染. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 布兰德 以适当的对比比对有品牌色彩的背景进行文字渲染. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 危险 将文字以危险为意. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 警告 以警告为意向的文本. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 资讯 以信息意向渲染文字. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 成功 以成功意向将文本渲染. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 哑巴 以微弱的意向渲染文字. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ### 椭圆 当文本溢出容器时,将文本切出椭圆形. | 类型 | 所需经费 | 默认 | | --- | --- | --- | | 嘘 | 虚假 | 虚假 | ## 常见问题 ### @asphalt-react/typography 是什么？ 类型 ### 如何安装 @asphalt-react/typography？ 在项目目录运行 npm install @asphalt-react/typography，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>= 16\.8\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @asphalt-react/typography 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @asphalt-react/typography 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @asphalt-react/typography 可以商用吗？ @asphalt-react/typography 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。 ### @asphalt-react/typography 的下载量有多少？ 根据 npm 官方下载统计，@asphalt-react/typography 在 2026/10/07 – 2026/11/05 这 30 天内被下载 1,956 次，日均约 65 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @asphalt-react/typography 还在维护吗？ 最新版本 2\.19\.0 发布于 2026/10/29（10 天前）；至今共发布 30 个版本，其中过去 12 个月发布了 12 个；首次发布于 2023/04/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。