# @financial-times/o-editorial-typography 中文文档
规范地址：https://npmcn.com/package/%40financial-times/o-editorial-typography/
版本：2\.4\.2
npm 元数据更新时间：2026-10-06T13:39:41.267Z
中文译文更新时间：2026-11-14T18:32:58.958Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-editorial-typography
原文对照：https://npmcn.com/package/%40financial-times/o-editorial-typography/?lang=original
项目主页：https://registry.origami.ft.com/components/o-editorial-typography
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：52 kB，24 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：@financial-times/o-fonts ^5\.3\.5，@financial-times/o-colors ^6\.7\.0，@financial-times/o-spacing ^3\.2\.5，@financial-times/o-typography ^7\.6\.2
- 首次发布：2019-11-06T15:07:14.878Z
- 最新版本发布：2026-02-26T10:55:06.808Z
- 近 30 天下载量：11810（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：34（近 12 个月 1 个）
## 中文简介
编辑内容的打字风格.
## 安装
```sh
npm install @financial-times/o-editorial-typography
```
也可以使用：`pnpm add @financial-times/o-editorial-typography`、`yarn add @financial-times/o-editorial-typography`、`bun add @financial-times/o-editorial-typography`
## README
> ⚠️ **注:** o-编辑-打字法已替换为 [o3 编辑-打字法](https://npmcn.com/package/%40financial-times/o3-editorial-typography/README.md)请参看 [移徙指南](https://npmcn.com/package/%40financial-times/o-editorial-typography/MIGRATION.md#migrating-from-v3-to-o3-editorial-typography) 用于升级的步骤.
# o-编辑-打字法
_编辑内容的打字风格._
- [使用量](https://npmcn.com/package/%40financial-times/o-editorial-typography/#readme-usage)
- [标记](https://npmcn.com/package/%40financial-times/o-editorial-typography/#readme-markup)
- [萨斯](https://npmcn.com/package/%40financial-times/o-editorial-typography/#readme-sass)
- [移徙](https://npmcn.com/package/%40financial-times/o-editorial-typography/#readme-migration)
- [联系人](https://npmcn.com/package/%40financial-times/o-editorial-typography/#readme-contact)
- [许可证](https://npmcn.com/package/%40financial-times/o-editorial-typography/#readme-licence)
[o-打字法](https://registry.origami.ft.com/components/o-typography) 为用户界面提供基本的打字工具和样式. o-编辑-打字法以编辑内容的打字法为基础,包括头条、标签和副线。 它没有假设编辑打字法将在哪里使用 -- -- 它可以是一页、另一个组件或电子邮件等 -- -- 因此没有提供默认边距。 在文章中应用打字和排版编辑打字 [o-编辑外传](https://registry.origami.ft.com/components/o-editorial-layout)。 。 。 .
## 使用量
检查出来 [如何将 Origami 组件纳入您的项目](https://origami.ft.com/documentation/components/#including-origami-components-in-your-project) 开始 `o-editorial-typography`。 。 。 .
## 标记
#### 标题
标题1 -6为课目 `o-editorial-typography-heading-level-[level]`数字 :
```html
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
```
标题1适用于大多数情况,但更注重使用 `o-editorial-typography-headline` 换句话说.
```html
Don’t settle for black and white
```
#### 体质
段落使用 `o-editorial-typography-body` 类 :
```html
Lorem ipsum dolor sit amet consectetur adipisicing elit.
```
#### 名单
顺序列表和无顺序列表都有样式. 使用类 `o-editorial-typography-list` 和 `o-editorial-typography-list--ordered` 或者说 `o-editorial-typography-list--unordered`。 。 。 .
因此列表可能被用于不同的上下文,它们继承了大小和家族等字体属性. 因此它需要将字体样式应用到母元素上. 例如,可以用下列方法做到这一点: `o-editorial-typography-body`。 。 。 .
```html
- Lorem ipsum adipiscing elit.
- Sed feugiat turpis at massa tristique.
- Curabitu r accumsan elit luctus.
```
```html
- Lorem ipsum adipiscing elit.
- Sed feugiat turpis at massa tristique.
- Curabitu r accumsan elit luctus.
```
#### 主题标记
有主题标签的内容的参考类别. 主题标记通常是一个锚,但如果没有页面链接则不必是.
没有设置字体大小, 因此标记可能用于不同的上下文 .
```html
Topic Link
Topic Without Link
```
#### 链接
链接使用 `o-editorial-typography-link` 内置 a `o-editorial-typography-body` 集装箱.
```html
An article by
The Financial Times.
```
也提供反向样式,用于暗色背景. 使用 `o-editorial-typography-body--inverse` 在容器上允许反向样式.
```html
An article by
The Financial Times.
```
#### 作者标记
使用类设置作者标签样式 `o-editorial-typography-author`。一个作者标签通常是一个锚,但如果没有作者页面可以链接,则不必.
```html
Joe Doe
Joe Doe
```
#### 时间戳
`o-editorial-typography-timestamp` 样式为时间戳。 它没有设置字体大小或家族,因此可以用于不同的上下文,例如文章的旁线或评论部分.
```html
```
#### 按线
故事的旁线可能使用 `o-editorial-typography-byline`. 常与作者和时间戳样式同时使用.
```html
```
#### 说明
使用样式标题 `o-editorial-typography-caption`。 。 。 .
```html
©Lorem John Doe
```
## 萨斯
包含所有 o- Editorial- Typology 样式 `oEditorialTypography` 混合剂.
```scss
@import "@financial-times/o-editorial-typography/main";
@include oEditorialTypography();
```
为了包括你需要的样式 我们建议设置选项 `$opts` 参数.
例如只包含标题级别1-3和正文复制样式.
```scss
@include oEditorialTypography($opts: (
'body': true,
'headings': (1, 2, 3)
));
```
此示例显示所有选项 :
```scss
@include oEditorialTypography($opts: (
'body': true,
'lists': ('ordered', 'unordered'),
'caption': true,
'headline': true,
'headings': (1, 2, 3, 4, 5),
'standfirst': true,
'author': true,
'topic': true,
'byline': true,
'timestamp': true
));
```
我们建议包括风格与 `oEditorialTypography` ,并使用默认标记来减少项目中重复的 CSS 。 但是,如果无法更新标记到 `o-editorial-typography` 课程。 混合剂包括:
- `oEditorialTypographyHeadline`
- `oEditorialTypographyHeading`
- `oEditorialTypographyBody`
- `oEditorialTypographyList`
- `oEditorialTypographyCaption`
- `oEditorialTypographyStandfirst`
- `oEditorialTypographyByline`
- `oEditorialTypographyTimestamp`
- `oEditorialTypographyTag`
- `oEditorialTypographyDecorated`
例如,要输出一个标题:
```scss
.my-h2 {
@include oEditorialTypographyHeading(2);
}
```
或主题标签 :
```scss
.my-topic-tag {
@include oEditorialTypographyTag('topic');
}
```
见 [o-编辑-打字](https://registry.origami.ft.com/components/o-editorial-typography/sassdoc) 详细内容和更多实例.
#### 字体加载
通话 `oEditorialTypography` 将输出字体面来下载自定义的"金融时报"字体。 然而,IE11可以下载未使用的字体。 要根据您的用法集, 包含更多外观的字体 `$o-editorial-typography-load-fonts: false` 和使用情况 [o-fonts 数据](https://registry.origami.ft.com/components/o-fonts)。如果您的工程也使用了 o- typegraphy 并且已经设置 [$o-typography-load-fonts (单位:千美元)](https://registry.origami.ft.com/components/o-typography)。 。 。 .
```scss
// configure $o-editorial-typography-load-fonts to not include fonts
$o-editorial-typography-load-fonts: false;
// import dependencies
@import '@financial-times/o-editorial-typography/main';
// include css for select fonts manually
@include oFontsInclude(MetricWeb, semibold);
@include oFontsInclude(FinancierDisplayWeb, regular);
@include oFontsInclude(FinancierDisplayWeb, bold);
// include css for all editorial typography
@include oEditorialTypography();
```
## 移徙
| 状态 | 主要版本 | 最后一个小版本 | 移徙指南 |
| :-: | :-: | :-: | :-: |
| 活动 | 单位3 | 不详 | [迁移到 o3 编辑- 打字](https://npmcn.com/package/%40financial-times/o-editorial-typography/MIGRATION.md#migrating-from-v3-to-o3-editorial-typography) |
| 维护 | 3个 | 不详 | [迁移到 v3](https://npmcn.com/package/%40financial-times/o-editorial-typography/MIGRATION.md#migrating-from-v2-to-v3) |
| 维护 | 2个 | 不详 | [迁移到 v2](https://npmcn.com/package/%40financial-times/o-editorial-typography/MIGRATION.md#migrating-from-v1-to-v2) |
| 维护 | 1个 | 1.1 国家 | 不详 |
## 联系人
如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-editorial-typography/issues)访问 [{\\fn黑体\\fs20\\shad2\\2ah82\\3ah20\\4ah33\\fscx95\\3ch592001\\be1}#毛发折射](https://financialtimes.slack.com/messages/ft-origami/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 .
## 许可证
本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 .
## 常见问题
### @financial-times/o-editorial-typography 是什么？
编辑内容的打字风格\.
### 如何安装 @financial-times/o-editorial-typography？
在项目目录运行 npm install @financial-times/o-editorial-typography，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/o-fonts（^5\.3\.5）、@financial-times/o-colors（^6\.7\.0）、@financial-times/o-spacing（^3\.2\.5）、@financial-times/o-typography（^7\.6\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @financial-times/o-editorial-typography 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-editorial-typography 是否存在。
### @financial-times/o-editorial-typography 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @financial-times/o-editorial-typography 可以商用吗？
@financial-times/o-editorial-typography 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @financial-times/o-editorial-typography 的下载量有多少？
根据 npm 官方下载统计，@financial-times/o-editorial-typography 在 2026/10/15 – 2026/11/13 这 30 天内被下载 11,810 次，日均约 394 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @financial-times/o-editorial-typography 还在维护吗？
最新版本 2\.4\.2 发布于 2026/02/26（8 个月前）；至今共发布 34 个版本，其中过去 12 个月发布了 1 个；首次发布于 2019/11/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。