# @carbon/type 中文文档

规范地址：https://npmcn.com/package/%40carbon/type/

版本：11\.71\.0
npm 元数据更新时间：2026-11-04T14:08:18.759Z
中文译文更新时间：2026-11-09T02:38:30.716Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40carbon/type
原文对照：https://npmcn.com/package/%40carbon/type/?lang=original
项目主页：https://github.com/carbon-design-system/carbon#readme
源码仓库：https://github.com/carbon-design-system/carbon

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：144 kB，33 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- 首次发布：2018-11-09T19:32:17.268Z
- 最新版本发布：2026-11-04T14:08:18.338Z
- 近 30 天下载量：815651（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：344（近 12 个月 47 个）

## 中文简介

使用碳设计系统的数字和软件产品的打字法

## 安装

```sh
npm install @carbon/type
```

也可以使用：`pnpm add @carbon/type`、`yarn add @carbon/type`、`bun add @carbon/type`

## README

# @ 碳/ 类型

> 使用碳设计系统的数字和软件产品的打字法

## 开始

要安装 `@carbon/type` 在您的工程中, 您需要运行以下 命令使用 [无](https://www.npmjs.com/)数字 :

```bash
npm install -S @carbon/type
```

如果你喜欢 [雅伦](https://yarnpkg.com/en/),使用以下命令 相反:

```bash
yarn add @carbon/type
```

## 使用量

`@carbon/type` 提供多种方法,与IBM的打字工作 设计语言. 您可以在 JavaScript 或 Sass 中使用所有这些特性 . 这些特点包括:

| 特性 | 说明 |
| --- | --- |
| [字体面额](https://npmcn.com/package/%40carbon/type/#readme-font-face) | 包含 IBM 应用程序中的 PlexTM 字体面相 。 使用 Akamai CDN 软件 |
| [类型类](https://npmcn.com/package/%40carbon/type/#readme-type-classes) | 帮助直接使用类型样式。 默认未包含 |
| [字体家族](https://npmcn.com/package/%40carbon/type/#readme-font-family) | 定义应用程序中的 IBM PlexTM 字体堆栈, 并为字体定义工作提供助手 |
| [重设](https://npmcn.com/package/%40carbon/type/#readme-reset) | 提供高级 CSS 重置以用于您的项目 |
| [缩放](https://npmcn.com/package/%40carbon/type/#readme-type-scale) | 提供类型尺度。 可在任何特定步骤(步骤1、2、3等)访问大小 |
| [样式](https://npmcn.com/package/%40carbon/type/#readme-type-styles) | 为您的应用程序提供类型样式( 标题-01, 体长-01等) |

这个 `@carbon/type` 软件包允许您使用 IBM 设计中的打字 语言,包括类型尺度和字体,以及打字设计 碳设计系统的标志。 也有有意见的默认 用于常见元素上的样式 `h1`, (中文(简体) ), `h2`, (中文(简体) ), `p`等 (中文(简体) ).

您可以通过写入以下内容来使用此软件包:

```scss
@use '@carbon/type';

// Include type reset
@include type.reset();

// Include default type styles, targets h1, h2, h3, etc
@include type.default-type();

// Include utility classes for type-related properties
@include type.type-classes();

.selector {
  // Include a type style
  @include type.type-style('productive-heading-01');
}
```

这应当包括从项目中重置的默认类型,以及 来自Google的IBM Plex Mono和IBM Plex Sans的字体面定义 字相会.

使用时 `@carbon/react`,导入路径变为:

```scss
@use '@carbon/react/scss/type';
```

### 类型样式

而不是使用类型尺度, `@carbon/type` 提供代表 我们称之为类型风格。 这些符号有各种各样的特性用于造型 如何在一页上提供文本.

您可以在 [碳设计系统网站](https://www.carbondesignsystem.com/guidelines/typography/type-sets) 。 。 。 .

您可以在您的 Sass 文件内写入一个符号 :

```scss
@use '@carbon/type';

@include type.type-style('token-name');
```

此外,如果您使用的类型样式具有流体样式,则您可以通过 内 `true` 作为第二个参数 `type-style` 以启用流体样式。 对于 示例:

```scss
@use '@carbon/type';

@include type.type-style('token-name', true);
```

### 类型类

您的应用程序的样式建议方式是使用我们 [类型样式](https://npmcn.com/package/%40carbon/type/#readme-type-styles)然而,我们也提供辅助人员CSS课程 具体的使用案例。 在迅速形成一个项目时,这些也是有益的.

在您的工程中,您可以通过在您的工程中写下以下内容而将类型类课程包含在内: Sass 文件 :

```scss
@use '@carbon/type';

:root {
  @include type.type-classes();
}
```

然后在您要样式的元素中添加相应的类

```html
<span className="cds--type-mono">Test sentence</span>
```

| 选择器 | 说明 |
| --- | --- |
| `.cds--type-mono` | 指定字体面额为 IBM Plex Mono |
| `.cds--type-sans` | 指定字体面额为 IBM Plex Sans |
| `.cds--type-serif` | 以 IBM Plex Serif 指定字体面 |
| `.cds--type-light` | 指定字体重为轻 (300) |
| `.cds--type-regular` | 指定字体重为正则 (400) |
| `.cds--type-semibold` | 指定字体重为半粗体 (600) |
| `.cds--type-italic` | 将字体样式指定为斜体 |
| `.cds--type-<type-style>` | 设置给定类型样式的样式 |

### 字体家族

`@carbon/type` 为所有可用的IBM Plex字体提供字体堆栈. 您可以通过输入以下导入来访问字体家族信息 您的 Sass 文件 :

```scss
@use '@carbon/type';
```

字体堆栈可在 `$font-families` 变量。 你也可以这样 通过使用 `font-family` 通过下列方式实现函数:

```scss
.my-selector {
  font-family: type.font-family('mono');
}
```

你也可以使用这个 `font-family` 混合以自动设置 `font-family` 您的属性 :

```scss
.my-selector {
  @include type.font-family('serif');
}
```

您可以看到所有可用的字体家族 `$font-families` 。 。 。 .

### 重设

可在 `reset` 混合剂。 你可以包括这个 通过在您的 Sass 文件中写入以下内容来混合 :

```scss
@use '@carbon/type';

:root {
  @include type.reset();
}
```

此重置设置一些顶级属性 `html` 财务报告和审定财务报表 `body`,即: `font-size`, (中文(简体) ), `font-family`,还有一些 `text-rendering` 选项。 我们还绘制了地图 `strong` 标记到半粗体字体重量.

### 替换字体

`@carbon/type` 可以配置它自己的 Sass API 使用的字体家族,但它 不生成碳组件样式或控制 IBM Plex `@font-face` 输出。 Carbon的类型基础和组件样式紧密结合,所以 应用程序宽型号替换必须配置通过 `@carbon/styles` 萨斯入口. 见 [替换字体 `@carbon/styles`](https://npmcn.com/package/%40carbon/styles/README.md#replacing-the-typeface)。 。 。 .

### 类型比例

类型比值是通过 `$type-scale` 变量和相应的 `type-scale` 函数和混合。 但是,对于指定类型样式 建议是使用 [类型样式](https://npmcn.com/package/%40carbon/type/#readme-type-styles) 。 。 。 .

如果您想要使用类型缩放, 您可以包含所有与缩放相关的缩放 通过在您的 Sass 文件中写入下列工具及变量 :

```scss
@use '@carbon/type';
```

您可以使用 `type-scale` 函数 :

```scss
.my-selector {
  font-size: type.type-scale(1);
}
```

还有一个 `type-scale` 将设置的混合 `font-size` 直接给您 :

```scss
@use '@carbon/type';

.my-selector {
  @include type.type-scale(4);
}
```

## 实例

如果你想要更多关于如何使用的例子 `@carbon/type`我们有一些 实例可以查看:

-   [堆叠闪烁](https://stackblitz.com/edit/github-wdcdqx?file=src%2Findex.scss)

您还可以看到更多关于可用符号的文档 [这里](https://npmcn.com/package/%40carbon/type/docs/sass.md)

## 捐款

我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 [贡献指南](https://npmcn.com/.github/CONTRIBUTING.md)!

## 许可证

凭 [Apache 2.0 许可证](https://npmcn.com/LICENSE)。 。 。 .

## ![IBM Telemetry](https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg) IBM 遥测

本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 [选择退出IBM遥测数据收集](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection)。 。 。 . 有关所收集数据的更多信息,请参见: [IBM 遥测文档](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics)。 。 。 .

## 常见问题

### @carbon/type 是什么？

使用碳设计系统的数字和软件产品的打字法

### 如何安装 @carbon/type？

在项目目录运行 npm install @carbon/type，或使用 pnpm add / yarn add / bun add。

### @carbon/type 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @carbon/type 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @carbon/type 可以商用吗？

@carbon/type 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @carbon/type 的下载量有多少？

根据 npm 官方下载统计，@carbon/type 在 2026/10/09 – 2026/11/07 这 30 天内被下载 815,651 次，日均约 27,188 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @carbon/type 还在维护吗？

最新版本 11\.71\.0 发布于 2026/11/04（4 天前）；至今共发布 344 个版本，其中过去 12 个月发布了 47 个；首次发布于 2018/11/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。