# @financial-times/o-fonts 中文文档

规范地址：https://npmcn.com/package/%40financial-times/o-fonts/

版本：5\.3\.6
npm 元数据更新时间：2026-10-06T13:39:42.989Z
中文译文更新时间：2026-11-14T18:29:40.770Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-fonts
原文对照：https://npmcn.com/package/%40financial-times/o-fonts/?lang=original
项目主页：https://registry.origami.ft.com/components/o-fonts

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

- 包体积（解压后）：43.4 kB，11 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：@financial-times/o-brand ^4\.1\.0
- 首次发布：2019-02-12T16:07:50.275Z
- 最新版本发布：2026-02-26T10:55:09.011Z
- 近 30 天下载量：14073（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：39（近 12 个月 1 个）

## 中文简介

装入 FT 网络字体的 CSS 声明 。 不包括字体资产.

## 安装

```sh
npm install @financial-times/o-fonts
```

也可以使用：`pnpm add @financial-times/o-fonts`、`yarn add @financial-times/o-fonts`、`bun add @financial-times/o-fonts`

## README

> ⚠️ **注:** o-fonts 已被替换为 [o3 创建](https://npmcn.com/package/%40financial-times/o3-foundation/README.md)请参看 [移徙指南](https://npmcn.com/package/%40financial-times/o-fonts/MIGRATION.md#migrating-from-v5-to-o3-foundation@3) 用于升级的步骤.

# o-fonts 数据 [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://npmcn.com/package/%40financial-times/o-fonts/#readme-licence)

_使用 `o-fonts` 包含 Origami 提供的字体,或注册支持的自定义字体._

-   [使用量](https://npmcn.com/package/%40financial-times/o-fonts/#readme-usage)
-   [建议字体](https://npmcn.com/package/%40financial-times/o-fonts/#readme-recommended-fonts)
-   [默认包含的字体](https://npmcn.com/package/%40financial-times/o-fonts/#readme-fonts-included-by-default)
-   [所有可用的字体](https://npmcn.com/package/%40financial-times/o-fonts/#readme-all-available-fonts)
-   [萨斯](https://npmcn.com/package/%40financial-times/o-fonts/#readme-sass)
-   [捐款](https://npmcn.com/package/%40financial-times/o-fonts/#readme-contributing)
-   [移徙指南](https://npmcn.com/package/%40financial-times/o-fonts/#readme-migration-guide)
-   [联系人](https://npmcn.com/package/%40financial-times/o-fonts/#readme-contact)
-   [许可证](https://npmcn.com/package/%40financial-times/o-fonts/#readme-licence)

## 使用量

检查出来 [如何将 Origami 组件纳入您的项目](https://origami.ft.com/documentation/components/#including-origami-components-in-your-project) 开始 `o-fonts`。 。 。 .

## 建议字体

Origami组件使用有限的一组推荐字体面相,每个品牌都不同. 我们建议 [Sass 用户](https://npmcn.com/package/%40financial-times/o-fonts/#readme-sass) 仅包括所推荐的字体,并在列入另一字体之前仔细考虑性能影响。 但字体选择范围更广 [默认情况下包含](https://npmcn.com/package/%40financial-times/o-fonts/#readme-fonts-included-by-default) 因此,它们可用于构建服务用户. [Sass 用户](https://npmcn.com/package/%40financial-times/o-fonts/#readme-sass) 可选择只包含推荐字体,或其中任何字体 [可用字体](https://npmcn.com/package/%40financial-times/o-fonts/#readme-all-available-fonts)。 。 。 .

### 核心品牌推荐字体

| 重量 | FinancierDisplay 网页 | 计量网 |
| :-: | :-: | :-: |
| 细 |  |  |
| 光线 |  |  |
| 常设经常 |  | ✓ |
| 介质 | ✓ |  |
| 半粗体 |  | ✓ |
| 粗体 | ✓ |  |
| 黑色 |  |  |

-   **✓**: 可用的普通样式
-   **(单位:千美元)**: 可用斜体样式( 如果没有, 将显示 faux- taulic)

### 内部品牌推荐字体

| 重量 | 计量网 |
| :-: | :-: |
| 细 |  |
| 光线 |  |
| 常设经常 | ✓ |
| 介质 |  |
| 半粗体 | ✓ |
| 粗体 |  |
| 黑色 |  |

-   **✓**: 可用的普通样式
-   **(单位:千美元)**: 可用斜体样式( 如果没有, 将显示 faux- taulic)

### 白标签品牌推荐字体

_(无)_. Origami 组件不对白标签品牌进行字体假设并默认为系统字体.

## 默认包含的字体

选择比 [建议字体](https://npmcn.com/package/%40financial-times/o-fonts/#readme-recommended-fonts) 默认情况下包含,以便提供给Build Service用户。 如果使用 Origami 构建服务或 [包含带有 SAS 的默认字体](https://npmcn.com/package/%40financial-times/o-fonts/#readme-include-default-fonts),取决于您选择的产品品牌:

| 品牌 | 默认包含的字体( N)[所有可用的重量和样式](https://npmcn.com/package/%40financial-times/o-fonts/#readme-all-available-fonts)(中文(简体) ) |
| :-: | :-: |
| 核心项目 | FinancierDisplayWeb, MetricWeb 财经网 |
| 内部 | 计量网 |
| 白标签 | _(无)_ |

## 所有可用的字体

以下任何字体均可加入 `o-fonts` 使用 [索马里](https://npmcn.com/package/%40financial-times/o-fonts/#readme-sass),这对可能使用额外字体的专业标题等品牌有用. 构建服务用户仅限于 [默认包含的字体](https://npmcn.com/package/%40financial-times/o-fonts/#readme-fonts-included-by-default)。 。 。 .

| 重量 | FinancierDisplay 网页 | 金融通讯网 | 计量网 |
| :-: | :-: | :-: | :-: |
| 细 |  |  | ✓ |
| 光线 | {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 |  | {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 |
| 常设经常 | {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 | {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 | {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 |
| 介质 | {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 | ✓ | ✓ |
| 半粗体 | {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 |  | ✓ |
| 粗体 | ✓ | ✓ | {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 |
| 黑色 | ✓ | ✓ | ✓ |

-   **✓**: 可用的普通样式
-   **(单位:千美元)**: 可用斜体样式( 如果没有, 将显示 faux- taulic)

## 萨斯

### 包含默认字体

包括 [您品牌的所有字体](https://npmcn.com/package/%40financial-times/o-fonts/#readme-fonts-included-by-default)电话 `oFonts`。 。 。 .

```scss
@import '@financial-times/o-fonts/main';
@include oFonts();
```

为了提高站点性能,Origami组件使用更有限的一组字体面. 只包含推荐的一组字体面额, 设置 `recommended: true` 选项中 `$opts` 地图.

```scss
@import '@financial-times/o-fonts/main';
@include oFonts($opts: ('recommended': true));
```

您也可以使用一个选项以颗粒方式包含特定字体 `$opts` 地图。 地图对每个字体都有密钥 `metric`, (中文(简体) ), `financier-display`,或 `financier-text`,它接受一个重量和样式列表以包含.

例如,包括Origami组件使用的推荐字体和一个额外的字体, `MetricWeb` 以中等重量,并定期 `FinancierDisplayWeb`数字 :

```scss
@include oFonts($opts: (
    'recommended': true,
    'metric': (
        ('weight': 'medium', 'style': 'normal')
    ),
    'financier-display': (
        ('weight': 'regular', 'style': 'normal')
    )
));
```

_注意: 如果您的项目有多个 Sass 切入点呼叫 `oFontsVariantsIncluded` 选项与 `oFonts`,以告诉 `o-fonts` 哪些字体面孔已经输出._

### 字体加载

默认 [字体播放](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) 设置为 `swap`。在支持浏览器时,将显示一个系统字体,直到字体被装入为止。 要更新您的字体加载方法集 `$o-fonts-display` 在你的屁股顶端, 之前包括任何其他组件.

```scss
// Customise font loading.
$o-fonts-display: 'optional';
@import '@financial-times/o-fonts/main';


@include oFonts();
```

### 使用自定义字体家族

要注册自定义字体和所支持的变体,请使用混音符 `oFontsDefineCustomFont`。 。 。 .

在这个例子中,我们注册了一个自定义字体“ MyFont” , 有 sans 倒置 `MyFont, sans`。我们配置此字体,允许两种变体(一种是粗体或常重的普通样式)。 在混合内容中,我们包括 `@font-face` 从我们自己的来源装入这些字体.

```scss
@include oFontsDefineCustomFont('MyFont, sans', (
    (weight: regular, style: normal),
    (weight: bold, style: normal)
)) {
    @font-face {
        src: url('MyFont-Thin.woff2') format('woff2'), url('MyFont-Thin.woff') format('woff');
        font-family: MyFont;
        font-weight: 100;
        font-style: normal;
    }
    @font-face {
        src: url('MyFont-Bold.woff2') format('woff2'), url('MyFont-Bold.woff') format('woff');
        font-family: MyFont;
        font-weight: 700;
        font-style: normal;
    }
}
```

### 获取字体名称的字体家族

为了得到一个 `font-family` 字体的网络安全倒置,使用 `oFontsGetFontFamilyWithFallbacks` 函数.

```scss
$family: oFontsGetFontFamilyWithFallbacks(FinancierDisplayWeb); // FinancierDisplayWeb, sans-serif
```

### 从字体家族中获取字体名称

要获得一个没有倒数的字体, 请使用 `oFontsGetFontFamilyWithoutFallbacks`数字 :

```scss
$font: oFontsGetFontFamilyWithoutFallbacks('FinancierDisplayWeb, sans-serif'); // FinancierDisplayWeb
```

### 检查有重或样式的字体

检查字体是否支持重量/ 样式使用 `oFontsVariantExists`。 。 。 .

```scss
$allowed: oFontsVariantExists('MetricWeb', 'bold', 'normal'); // true
$allowed: oFontsVariantExists('MetricWeb', 'black', 'italic'); // false
```

### 选中重或样式的字体

检查项目使用中是否输出了字体重/ 样式 `oFontsVariantIncluded`。 。 。 .

```scss
// including fonts in project
@include oFonts($opts: (
    'metric': (
        ('weight': 'medium', 'style': 'normal')
    ),
));


$included: oFontsVariantIncluded('MetricWeb', 'medium', 'normal'); // true
$included: oFontsVariantIncluded('MetricWeb', 'bold', 'normal'); // false
```

_注意: 如果您的项目有多个 Sass 切入点呼叫 `oFontsVariantsIncluded` 选项与 `oFonts`,以告诉 `o-fonts` 哪些字体面孔已经输出._

## 捐款

### 添加新字体或字体变体

注意:字体文件包含在一个单独的私有寄存器中([o-fonts-资产](https://github.com/Financial-Times/o-fonts-assets)) (中文(简体) ).

1.  打开 `src/scss/_variables.scss` 并更新 `$o-fonts-build-service-path` 变量为 [o-fonts-资产](https://github.com/Financial-Times/o-fonts-assets) 包括您的新字体.
    
2.  将字体姓氏(如果是一个全新的家族)和变体样式添加到私人 `$_o-fonts-families` 地图.
    
3.  如果添加了全新字体, 在 `oFonts` 混合剂。 包括新的 [默认字体](https://npmcn.com/package/%40financial-times/o-fonts/#readme-fonts-included-by-default) 或带有 [建议字体](https://npmcn.com/package/%40financial-times/o-fonts/#readme-recommended-fonts) (见 `$_o-fonts-default` 财务报告和审定财务报表 `$_o-fonts-recommended`) (中文(简体) ).
    
4.  最后,更新演示(见 `origami.json`) (中文(简体) ).
    

## 移徙指南

| 状态 | 主要版本 | 最后一个小版本 | 移徙指南 |
| :-: | :-: | :-: | :-: |
| 活动 | 单位3 | 不详 | [迁移到 o3](https://npmcn.com/package/%40financial-times/o-fonts/MIGRATION.md#migrating-from-v5-to-o3-foundation@3) |
| 维护 | 页:1 | 不详 | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-fonts/MIGRATION.md#migrating-from-v4-to-v5) |
| 已贬值 | 页:1 | 4.5 国家 | [迁移到 v4](https://npmcn.com/package/%40financial-times/o-fonts/MIGRATION.md#migrating-from-v3-to-v4) |
| 已贬值 | 3个 | 3.3 国家 | [迁移到 v3](https://npmcn.com/package/%40financial-times/o-fonts/MIGRATION.md#migrating-from-v2-to-v3) |
| 已贬值 | 2个 | 第2.3条 | \- 说吧 |
| 已贬值 | 1个 | 1\. 5个 | \- 说吧 |

* * *

## 联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-fonts/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 .

* * *

## 许可证

本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 .

## 常见问题

### @financial-times/o-fonts 是什么？

装入 FT 网络字体的 CSS 声明 。 不包括字体资产\.

### 如何安装 @financial-times/o-fonts？

在项目目录运行 npm install @financial-times/o-fonts，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/o-brand（^4\.1\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @financial-times/o-fonts 支持 TypeScript 吗？

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

### @financial-times/o-fonts 支持 ESM 还是 CommonJS？

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

### @financial-times/o-fonts 可以商用吗？

@financial-times/o-fonts 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @financial-times/o-fonts 的下载量有多少？

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

### @financial-times/o-fonts 还在维护吗？

最新版本 5\.3\.6 发布于 2026/02/26（8 个月前）；至今共发布 39 个版本，其中过去 12 个月发布了 1 个；首次发布于 2019/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。