# @canonical/styles-typography 中文文档

规范地址：https://npmcn.com/package/%40canonical/styles-typography/

版本：0\.45\.0
npm 元数据更新时间：2026-10-23T01:42:41.822Z
中文译文更新时间：2026-11-09T01:17:56.980Z
软件包许可：LGPL-3\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40canonical/styles-typography
原文对照：https://npmcn.com/package/%40canonical/styles-typography/?lang=original
项目主页：https://github.com/canonical/pragma-web#readme
源码仓库：https://github.com/canonical/pragma-web

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

- 包体积（解压后）：64.4 kB，10 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：2 个
- 首次发布：2026-03-11T11:22:46.065Z
- 最新版本发布：2026-10-23T01:42:41.379Z
- 近 30 天下载量：9935（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：27（近 12 个月 27 个）

## 中文简介

Canonical Design System的Typtography基线对接引擎和比例符.

## 安装

```sh
npm install @canonical/styles-typography
```

也可以使用：`pnpm add @canonical/styles-typography`、`yarn add @canonical/styles-typography`、`bun add @canonical/styles-typography`

## README

# @ canonical/ 风格- 字典

Canonical设计系统基线网格对接. 这个软件包提供三个可互换的 CSS 引擎,将文本基线坐标为可配置的网格,加上打字符和桥接的元素规则 `@canonical/design-tokens` 到发动机的可变合同.

## 快速启动

导入默认引擎( 顶点单位) :

```css
@import url("@canonical/styles-typography");
```

就是这样。 全体 `h1`– 说吧 –`h6` 财务报告和审定财务报表 `p` 元素将与基线网格一致。 默认引擎使用 CSS `cap` 单位,不需要 JavaScript 字体提取.

### 网格单位

`--baseline-height` 是一个网格步骤的大小,它是可选的。 以适合页面的长度宣布:

```css
:root {
  --baseline-height: 0.5rem;  /* or 8px, or 0.25rem, or 6pt */
}
```

`rem` 是通常的选择,因为网格随即遵循读者自己的字体大小:设置较大基数的读者得到比例较大的网格,且该类型会留在上. `px` 用 CSS 像素来修正网格,所以无论读者的字体大小如何,它都保持不变,这就是当网格必须与其它测量方式相同的东西排成一行时你想要的——一个背景图像,或者另一个系统绘制的规则.

CSS像素是一个参考单位,而不是一个设备像素:在一个高密度显示上,一个CSS像素覆盖了几个物理像素,浏览器的缩放会改变多少. `px` 购买不随字体大小移动的网格; 它不购买与显示器自身像素的对齐 .

**无处宣布,电网是 `0.25rem`,4个像素,以通常的根字体大小.** 默认声明一次, 在 `tokens.css`在包裹内 `ds.tokens` 块 :

```css
:where(:root) {
  --baseline-height: 0.25rem;
}
```

`:where()` 以零为重,所以任何真实的 财产申报都比它强 不论层内的顺序: `@canonical/styles` 宣布为 `:root` 内 `spacing.css`,申请可在任何内容上声明,而且任一内容都得到遵守. `elements.css` 然后三个引擎读取 `var(--baseline-height)` 赤出相去,相去相去相去二十六回,相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相相去相去相去相去相相去相去相去相去相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.

**一个没有默认的情况是一个引擎连接,没有 `tokens.css`。 。 。 .** 没有任何引擎进口任何东西——这就是这个软件包被切成的形状,其成分生活在 `index.css` 因此,样式表 单独一个引擎 要么宣布 `--baseline-height` 进口或进口 `./tokens.css` 在它旁边,没有其中的一动,动能就一无所获,引擎也跑不动。 包项由两者组成,并且不受影响,任何导入都一样 `@canonical/styles`。 。 。 .

## 如何切开此软件包

5个文件,它们之间的剪接是本节的要点: 这是一个规律,而不是一个归档 和相同的模式贯穿 `@canonical/styles` 还有香草适配器.

### 文件是一个概念, 它的名称是什么

不是为了它包含的东西 也绝不是为了它遗漏的东西.

| 文件 | 概念 |
| --- | --- |
| `tokens.css` | **价值观.** 将设计符号的打印比例 映射到引擎和元素规则上 它宣布自定义属性和样式无一可言. |
| `elements.css` | **裸露的元素会得到什么.** `body`, (中文(简体) ), `h1`– 说吧 –`h6`, (中文(简体) ), `p`, (中文(简体) ), `.p`, (中文(简体) ), `.code`, (中文(简体) ), `.editorial`。 。 。 . |
| `baseline-cap.css`, (中文(简体) ), `baseline-metrics.css`, (中文(简体) ), `baseline-trim.css` | **发动机.** 将一行放入电网的算术. 可互换,一次装入. |
| `index.css` | **全文**没有别的 它由符号,元素规则和默认引擎组成,依此顺序排列. |

五通各为入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入出出出出出出出出入入出出出出出出出出入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入出出出出出出入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入.

### 叶子不导入兄弟姐妹;条目构成

没有叶子导入此套件的另一文件 。 仅 `index.css` 是的,只有三个它编曲.

包外的一叶: `tokens.css` 停车 `@canonical/design-tokens`打印比例尺, 其名称shims。 这是一种依赖性,而不是兄弟关系,它是唯一一种——发动机和 `elements.css` 完全不导入.

这不是刻薄。 浏览器处理每个 `@import` 作为自己的样式表和去重复 没有, 因此两个路径所到达的文件会被获取, 解析和两次应用 。 第一个切口 软件包 `elements.css` 导入 `tokens.css` 发动机也输入了天平 已解析的样式表两次带有打印尺度——48 270个重复字节,四分之一 进入。 导入的兄弟关系没有让每个文件有一个路径通过构建而不是通过 注意, 外部的输入从 `tokens.css` 一个人.

对消费者的要求是小而值得的: **链接文件,你得到文件是什么, 你宣布它的内容.** 引擎本身读取 `--baseline-height` 财务报告和审定财务报表 `--font-size`· ; 元素规则读取值 `tokens.css` 声明 基准单位可写入 `rem` 或者说 `px`默认为 `0.25rem` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}当没人宣布的时候.

### 同一个词意味着每个包裹都一样

`@canonical/styles` 使用相同的三个名词。 内容 `tokens.css` 是数值 拿走这个包裹 `tokens.css`; 其编号 `elements.css` 是赤裸的元素 得到和带走这个 软件包 `elements.css` 和默认引擎;其 `layout.css` 是布局预设。 内容 `index.css` 是整个.

`@canonical/styles-vanilla-adapter` 船舶a `elements.css` 也: 构造的同一三个元素层 从同一个源文件, 发送到一个岛屿而不是页面.

三个背景,一个词汇。 阅读者已经理解 `elements.css` 曾经理解它 唯一需要问的就是它针对的哪一页区域.

### 为什么老名字去了

`mapper.css` 是术语,一个内部词 用于命名符号的文件, 它告诉读者 并隐瞒了文件在做两个工作的事实.

样式包 `core.css` 更糟糕的是,因为它命名了包容而不是概念: 除了元素层之外的一切 用减法定义的名称会告诉你文件不是什么. 你不首先知道规则是否属于它 整个列表在减去 从, 当列表更改名称时, 静静地停止真实. `tokens.css`, (中文(简体) ), `elements.css` 财务报告和审定财务报表 `layout.css` 每个名字都有一条规则.

### 如何添加文件

决定它属于哪个概念. 这个决定解决了剩下的问题:

-   **名称** - 概念的名词;
-   **其层** —— 说 `ds.tokens` 对于数值, `ds.typography` 用于元素规则和发动机;
-   **哪个条目导入它** ——这个概念的入门,而不是其他入门.

如果它属于没有概念,那就是发现:要么缺少概念,要么文件是两个 文档。 这个包裹 `exports` 地图是消费者可以联系到什么的合同.

## 叠加层

CSS级联的两个事实塑造了这个包.

无论哪一方的挑选者如何,任何级联层的规则都比任何层的规则高。 而在一层内,确定了两个相同特殊性的规则,即一个装载秒.

这个套件曾经将它的每一条规则都完全不加分层地运出,所以第一个事实适用于所有规则:一个分层上写的应用程序都无法打败它们. 第二个事实对元素选择者来说是最难的, `body`, (中文(简体) ), `h1`– 说吧 –`h6` 财务报告和审定财务报表 `p`,它处于特殊位置 `(0,0,1)`: 应用程序本身 `p` 规则与这个完全捆绑, 和捆绑者的产出订单 决定胜者, 一次一个财产。 其余的档案比那更具体—— `.p`, (中文(简体) ), `.code` 财务报告和审定财务报表 `.editorial` 是班级, `:root` 是一个伪阶级,和 `.editorial h1` 这是一种阶级和共同的要素——因此,这些是靠具体性而不是靠运气而赢得的,这是它自己的问题,因为申请意在推翻它们.

分层,设计系统会输给一个应用程序的未分层的CSS,故意和可以预测,还故意地将下层打倒.

| 什麽 | 层 |
| --- | --- |
| `tokens.css` - 设计取名shims(`:root`,只有自定义属性) | `ds.tokens` |
| `tokens.css` ——其进口的打字比例尺 | `ds.modifiers`,该文件打开 |
| `elements.css` - 那个 `body`, (中文(简体) ), `h1`– 说吧 –`h6`, (中文(简体) ), `p`, (中文(简体) ), `.p`, (中文(简体) ), `.code` 财务报告和审定财务报表 `.editorial` 规则 | `ds.typography` |
| `baseline-cap.css`, (中文(简体) ), `baseline-metrics.css`, (中文(简体) ), `baseline-trim.css` - 每一个规则 | `ds.typography` |

`ds.typography` 坐在这里 `ds.reset` 及以下各项 `ds.modifiers` 顺序 `@canonical/styles` 声明,所以打印缩放 `ds.modifiers` 可以对引擎生产的东西进行再调整,一个组件样式表——更高仍然——总是它自己文本上的最终词.

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}这叫Shims的名声 `ds.tokens` 没有 `ds.typography` 因为它们是自定义的属性,而不是其他的:自定义的属性在它被宣告的地方,只有在规则被读取的情况下,它才无所作为,所以它们属于其他原始价值之外.

这些规则按名称选择元素—— `body`, (中文(简体) ), `h1`, (中文(简体) ), `p` 因此,它们适用于整个文件。 这就是设计系统打字的目的.

此软件包没有自定义的图层顺序: 它是由 `@canonical/styles` 在该软件包的订单语句之后,这是第一个样式表的第一个规则,并命名了这个软件包所写的所有三层. 与实例一样,层层是单独链接的,是它们最初出现的地方所创建的,对于一个包来说,这个包的定义很明确,解决不了这个包需要解决的任何问题——任何定制属性都不会在涉及的多层中声明.

本节为本套件在安排中所占份额的参考. 整个过程背后的推理——浏览器是如何决定的,为什么一个无层规则会比每个分层规则都要好,运行第二个CSS框架的一页的封装在哪里活下来——是: [级联合同](https://npmcn.com/docs/explanations/STYLES_CASCADE.md)。 。 。 .

## 如何运作

浏览器添加隐形 **半牵头** 上行和下行文本。 准确的量取决于字体的内部度量,计算 `font-size`,以及 `line-height`。这使得不同文本元素之间的垂直对齐无法预测.

基线引擎通过计算第一个基线在行框内的位置,然后应用一个 `padding-top` 编号 : `margin-bottom` 成对地向元素倾斜 所以它的基线完全在网格线上 互补性 `margin-bottom` 确保该元素的总外高保持一个多 `--baseline-height`。 。 。 .

```
 line-height (computed)
 +----------------------------------------------+
 |  half-leading (top)                           |
 |  +----------------------------------------+  |
 |  | ascender area                           |  |
 |  | - - - - cap line - - - - - - - - - - - |  |
 |  | glyph body                              |  |
 |  | - - - - baseline - - - - - - - - - - - |  |  ← snap this to the grid
 |  | descender area                          |  |
 |  +----------------------------------------+  |
 |  half-leading (bottom)                        |
 +----------------------------------------------+
```

这个 `mod()` CSS功能进行举重:

```css
--top-nudge: calc(
  var(--baseline-height) -
  mod(var(--baseline-position), var(--baseline-height))
);
```

多线块保持网格,因为 `line-height` 总是设置为多个 `--baseline-height`. 推克只补偿了第一行的半铅相抵.

## 发动机

三台引擎执行相同的网格-snap模式,有不同的取舍. 直接导入符合您限制的, 或者使用 `index.css` 用于再导出默认值(上限单位).

### basin-cap.css – Cap 单位(默认)

```css
@import url("@canonical/styles-typography/src/baseline-cap.css");
```

使用浏览器本地化 `cap` CSS 单元,用于在渲染时解析字体测量标准 。 没有 JavaScript 提取步骤,没有每个font 变量. 变化 `font-family` 在元素上自动更新 `1cap` 值 .

基线位置公式为: `(line-height + 1cap) / 2` ——浏览器解决 `1cap` 从字体的 OpenType 表格中以本地形式列出.

| 浏览器 | `mod()` | `cap` 单位 | 这引擎的地板 |
| --- | --- | --- | --- |
| 颜色 | 125+ (英语) | 118岁以上 | **125+ (英语)** |
| 萨法里 | 15.4+ (中文(简体) ) | 17.2+ (简体中文) | **17.2+ (简体中文)** |
| 火花 | 118岁以上 | 97岁以上 | **118岁以上** |

`mod()` 将Chrome和Firefox捆绑起来 `cap` 单位束缚了Safari.

### 基线测量.css——提取的度量衡

```css
@import url("@canonical/styles-typography/src/baseline-metrics.css");
```

拥有最广泛的浏览器支持的原始引擎. 需要使用 `extract-font-data` CLI: 爱丽丝

```css
:root {
  --ascender: 1068;
  --descender: -292;
  --units-per-em: 1000;
}
```

基线位置是根据下列指标计算的: `((line-height - line-height-scale) / 2) + ascender-scale`更多的动词,但到处工作 `mod()` 被支持.

### 基线-trim.css-文本框-trim混合

```css
@import url("@canonical/styles-typography/src/baseline-trim.css");
```

最现代的方法。 用途 `text-box: trim-both cap alphabetic` 完全去除半铅,然后用 `mod()`\- 恢复网格对齐的基于比值。 收紧内容框(用于按钮、卡片、光学中心)的结果.

| 浏览器 | `text-box-trim` | `mod()` | `cap` 单位 | 这引擎的地板 |
| --- | --- | --- | --- | --- |
| 颜色 | 133岁以上 | 125+ (英语) | 118岁以上 | **133岁以上** |
| 萨法里 | 18.2+ (中文(简体) ) | 15.4+ (中文(简体) ) | 17.2+ (简体中文) | **18.2+ (中文(简体) )** |
| 火花 | 154+ (韩语) | 118岁以上 | 97岁以上 | **154+ (韩语)** |

`text-box-trim` 绑起每个柱子 这个 `cap` 单位之所以列在列表中,是因为软体测量了盖高, `mod(calc(-1 * 1cap), …)`,所以这个发动机需要它 与盖发动机一样多.

**它不会回到电网.** 平底线下被跳出,元素得到它的半向回向,但是活下来的活动被计算成一个被修剪的盒子,从不读出行高,所以文字从网格上掉入了一个单元的一小部分——测量出,一个16px srif上的6.516px在24px线上,不管这个单元是什么. 这些浏览器使用盖状引擎.

## 消费者合同

每个引擎每个元素读取同一套CSS自定义属性:

| 变量 | 范围 | 说明 |
| --- | --- | --- |
| `--baseline-height` | `:root` | 网格单位大小,在任意长度单位(例如. `0.5rem` 或者说 `8px`)——随处可选 `tokens.css` 已装入,并声明 `0.25rem` 默认; 由没有它链接的引擎要求 |
| `--font-size` | 元素 | 字体大小为 a `<length>` |
| `--line-height-multiplier` | 元素 | 基线高度单位 |
| `--line-height` | 元素 | 可选覆盖: 明确的行高, 绕过乘数 |
| `--space-after` | 元素 | 可选:基线高度单位中的额外下边 |

这个 **计量引擎** 额外要求 `:root`数字 :

| 变量 | 说明 |
| --- | --- |
| `--ascender` | 字体升起值( 无单位, 来自 OpenType 表格) |
| `--descender` | 字体递减器值( 无单位, 负) |
| `--units-per-em` | 字体单位/ 平均值 |

## 键和元素

`tokens.css` 财务报告和审定财务报表 `elements.css` 连接语义印刷符号 `@canonical/design-tokens` 到发动机的可变合同。 两者均由下列来源进口: `index.css`,包的构成的切入点.

设计符号提供变量如下:

```
--typography-heading-1-font-size
--typography-heading-1-line-height    (unitless ratio)
--typography-heading-1-font-weight
--typography-heading-1-letter-spacing
--typography-heading-1-font-family
```

`elements.css` 将这些变量转换为每个元素的引擎变量(`h1`– 说吧 –`h6`, (中文(简体) ), `p`, (中文(简体) ), `.p`, (中文(简体) ), `.code`) (中文(简体) ). 它设置 `--line-height` 作为长度,绝不是乘数:它更喜欢设计符所携带的精确尺寸,倒回到被断到网格上的阶梯比例.

```css
--line-height: var(
  --typography-heading-1-line-height-dimension,
  round(
    up,
    calc(
      var(--typography-heading-1-font-size) *
      var(--typography-heading-1-line-height)
    ),
    var(--baseline-height, 0.25rem)
  )
);
```

`--line-height-multiplier` 是引擎合同的另一半 对于直接驱动引擎的消费者来说 而不是通过这张地图 `--line-height` 如果它被设定,和 `calc(--baseline-height * --line-height-multiplier)` 如果不是的话 实例采用乘数; `elements.css` 使用长度.

## 软件包结构

```
src/
  index.css              ← the package composed (tokens, elements, cap engine)
  tokens.css             ← the typographic scale and the naming shims
  elements.css           ← the rules that read them
  baseline-cap.css       ← cap-unit engine
  baseline-metrics.css   ← extracted-metrics engine
  baseline-trim.css      ← text-box-trim + cap hybrid
  scripts/
    extractFontData.ts   ← CLI for extracting font metrics
example/
  index.html             ← interactive demo with engine switcher
  serve.ts               ← dev server with live-reload
  scripts/               ← sidebar, font picker, content presets
  fonts/                 ← bundled .woff2 files for the demo
  styles/                ← demo layout and debug styles
```

## 提取字体计量

这个 `extract-font-data` CLI 从字体文件中读取 OpenType 度量衡 。 只有在使用 **基线测量** 发动机.

```bash
bun run extract-font-data ./path/to/font.ttf
```

输出 :

```
Add the following variables to your CSS and follow the instructions in the README:
:root {
  --ascender: 1068;
  --descender: -292;
  --units-per-em: 1000;
}
```

过 `--all` ,以查看包括计算出某一行高的克:

```bash
bun run extract-font-data ./path/to/font.ttf 1.5 --all
```

### 洞穴

提取器使用 `opentype.js` 以解析字体文件。 它的工作与大多数 `.ttf`, (中文(简体) ), `.otf`,以及 `.woff` 文件,但不包含 TrueType 或 CFF 大纲的字体可能失败 :

```
error: Font doesn't contain TrueType or CFF outlines.
```

## 发展

以活式重载启动交互示例 :

```bash
bun run dev
```

这为下列机构提供了范例: [http://localhost:3333/example/ 页面存档备份,存于互联网档案馆](http://localhost:3333/example/)边栏允许您:

-   **切换引擎** ——实时切换出盖子单元,度量衡和文本串
-   **切换字体** 从捆绑的字体中取出自动应用的衡量标准
-   **双塔** 调整每个标题级别和段落的字体大小、行高乘数和后空格
-   **调整基准** ——改变基线网格高度并查看对齐更新

基线网格作为红色 1px 线上覆盖而提供,因此对齐错误立即可见.

## 浏览器支持

所有引擎都需要 `mod()` 用于网格平面计算:

| 特性 | 用于 | 颜色 | 萨法里 | 火花 |
| --- | --- | --- | --- | --- |
| `mod()` | 所有三个引擎 | 125号 | 15.4 国家 | 118 (韩语) |
| `round()` | 线高倒数 `elements.css` | 125号 | 15.4 国家 | 118 (韩语) |
| `cap` 单位 | 盖和文字刻出引擎 | 118 (韩语) | 17.2 联合国 | 97 (英语) |
| `text-box-trim` | 仅限文本刻入引擎 | 133国 | 18.2 国家 | 154 (韩语) |

按引擎来读取表格,而不是一行一行——在它使用的特性中,一款引擎的地板是其列中最高的数字:

| 发动机 | 颜色 | 萨法里 | 火花 | 是什么束缚 |
| --- | --- | --- | --- | --- |
| `baseline-cap.css` | 125号 | 17.2 联合国 | 118 (韩语) | `mod()`,则 `cap` 萨法里部队 |
| `baseline-metrics.css` | 125号 | 15.4 国家 | 118 (韩语) | `mod()` 整个 |
| `baseline-trim.css` | 133国 | 18.2 国家 | 154 (韩语) | `text-box-trim` 整个 |

该桌上有一个警告,它是一个真实的警告.

**以下 `text-box-trim`,文本刻录引擎不持有网格.** 修剪被跳过,元素得到 它的半领导回, 和活下来的微软- `mod(calc(-1 * 1cap), unit)` ——按剪接箱计算,从不读取行高,因此无法补偿. 在Chromium中用一款16px serif在一款24px线上进行测量:用修剪法,第一个基线坐落在一款4px格上为12px,一款8px格上为16px,一款12px格上为12px,每款一整个单元;而修剪法忽略了每个单元的6.516px,即1.63个单元,0.81个单元和0.54个单元. 元素外高会保留一整个单位,所以块块仍然堆放在网格上,但其中的文字并不坐放于上. 地板下方的浏览器应该使用盖状引擎,盖状引擎由未调整的行框来计算出.

`mod()` 这是硬地板。 在它下面没有引擎计算出一个微软 文本会回到它自然的领先位置.

## 常见问题

### @canonical/styles-typography 是什么？

Canonical Design System的Typtography基线对接引擎和比例符\.

### 如何安装 @canonical/styles-typography？

在项目目录运行 npm install @canonical/styles-typography，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 extract-font-data，可以用 npx extract-font-data 直接运行。

### @canonical/styles-typography 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/canonical\_\_styles-typography 是否存在。

### @canonical/styles-typography 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @canonical/styles-typography 可以商用吗？

@canonical/styles-typography 使用 LGPL-3\.0 许可。弱 Copyleft：作为库被调用时通常不要求开源你自己的代码，但修改库本身需以 LGPL 开源；前端打包合并后的适用边界存在不同理解。以上为概括，不构成法律意见，请以许可原文为准。

### @canonical/styles-typography 的下载量有多少？

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

### @canonical/styles-typography 还在维护吗？

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