# @financial-times/o-typography 中文文档 规范地址：https://npmcn.com/package/%40financial-times/o-typography/ 版本：7\.7\.2 npm 元数据更新时间：2026-10-06T13:40:02.265Z 中文译文更新时间：2026-11-14T18:26:23.328Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-typography 原文对照：https://npmcn.com/package/%40financial-times/o-typography/?lang=original 项目主页：https://registry.origami.ft.com/components/o-typography ## 关键信息（来自 npm 元数据） - 包体积（解压后）：144 kB，30 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：1 个 - peer 依赖：@financial-times/math ^1\.0\.0，@financial-times/o-grid ^6\.1\.8，@financial-times/o-fonts ^5\.3\.5，@financial-times/o-icons ^7\.8\.0，@financial-times/o-colors ^6\.7\.0，@financial-times/o-spacing ^3\.2\.5，@financial-times/o-normalise ^3\.3\.2 - 首次发布：2019-02-12T16:23:32.269Z - 最新版本发布：2026-07-09T15:56:06.431Z - 近 30 天下载量：14358（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：67（近 12 个月 2 个） ## 中文简介 FT品牌网站的打字风格. 包括字体缩放,垂直节奏等打字基础,和字体倒回;外加UI的样式,包括链接,标题和标题. 其他组件以O-打字法为基础,以提供更多 ## 安装 ```sh npm install @financial-times/o-typography ``` 也可以使用：`pnpm add @financial-times/o-typography`、`yarn add @financial-times/o-typography`、`bun add @financial-times/o-typography` ## README > ⚠️ **注:** o- typtography 已被替换为 [o3 创建](https://npmcn.com/package/%40financial-times/o3-foundation/README.md)请参看 [移徙指南](https://npmcn.com/package/%40financial-times/o-typography/MIGRATION.md#migrating-from-v7-to-o3-foundation) 用于升级的步骤. # o-打字法 FT品牌网站的打字风格. - [概览](https://npmcn.com/package/%40financial-times/o-typography/#readme-overview) - [使用量](https://npmcn.com/package/%40financial-times/o-typography/#readme-usage) - [标记](https://npmcn.com/package/%40financial-times/o-typography/#readme-markup) - [萨斯](https://npmcn.com/package/%40financial-times/o-typography/#readme-sass) - [Java 脚本](https://npmcn.com/package/%40financial-times/o-typography/#readme-javascript) - [解决问题](https://npmcn.com/package/%40financial-times/o-typography/#readme-troubleshooting) - [移徙指南](https://npmcn.com/package/%40financial-times/o-typography/#readme-migration-guide) - [联系人](https://npmcn.com/package/%40financial-times/o-typography/#readme-contact) - [许可证](https://npmcn.com/package/%40financial-times/o-typography/#readme-licence) ## 概览 该组件提供字体缩放,垂直节奏等打字基础,以及字体倒回. 加UI的样式包括链接,标题,和标题. 其他组件以O-Typtography为基础,以提供更具体的用例,例如: [编辑打字](https://github.com/Financial-Times/o-editorial-typography), (中文(简体) ), [引用](https://github.com/Financial-Times/o-quote/),或 [大数](https://github.com/Financial-Times/o-big-number/)。 。 。 . 默认情况下,o-typtography使用单一的打字尺度,用于所有字体. 比例尺由字体大小和行高组合组成,如下所示: | 缩放 | 字体大小 | 线高 | | :-: | :-: | :-: | | \-2号 | 12px 时速 | 16px 时 | | \-1号 | 14px 时速 | 16px 时 | | 0 个 | 16px 时 | 20px (英语) | | 1个 | 18px (简体中文) | 20px (英语) | | 2个 | 20px (英语) | 24px (英语) | | 3个 | 24px (英语) | 28px (英语) | | 页:1 | 28px (英语) | 32px 密码 | | 页:1 | 32px 密码 | 32px 密码 | | 6个 | 40px (英语) | 40px (英语) | | 第7条 | 48px 坐标 | 48px 坐标 | | 第8条 | 56px (英语) | 56px (英语) | | 第9条 | 72px (英语) | 72px (英语) | | 10个 | 84px (韩语) | 84px (韩语) | _注:白标签品牌版的o-typtography有不同的默认比例. 字体大小相同,但行-高为1.2x,为每个尺度的字体大小._ 这种比例构成所有通过o-typography提供的打字风格. 使用 Sass 时可用 [打印组合](https://npmcn.com/package/%40financial-times/o-typography/#readme-mixins)。 。 。 . ## 使用量 检查出来 [如何将 Origami 组件纳入您的项目](https://npmcn.com/package/docs/legacy-o2-docs/technical-guide.md) 开始 `o-typography`。 。 。 . ## 标记 预定义 CSS 类 `o-typography` 使用时可用 [构建服务](https://www.ft.com/__origami/service/build/),并且可以通过 [萨斯](https://npmcn.com/package/%40financial-times/o-typography/#readme-sass)。 。 。 . 类不依赖于特定的HTML,但我们鼓励开发者使用语义元素. 举个例子. ```html

Heading level 1

Heading level 2

Some body copy.

Some link. ``` 一个链接 _可能_ 在新窗口/标签中打开 `target="_blank"` 但是,我们建议多数情况下不要这样做,因为这样做可能会使用户感到不适(见附件) [网络内容无障碍准则](https://www.w3.org/TR/WCAG20-TECHS/G200.html) (d) 关于何时在新窗口/塔布中打开的建议。 使用 `rel="noreferrer noopener"` 属性为 `target="_blank"` 为避免 [性剥削 `window.opener` API 密码](https://mathiasbynens.github.io/rel-noopener/)。 。 。 . ```html Some external link. ``` 见 [演示](https://o2-core.origami.ft.com/?path=/docs/deprecated-o-typography-readme--docs&globals=backgrounds:!undefined) 详细列出所提供的课程及其效果. ### 包装类 `o-typography` 还提供包装课。 这减少了开发者对特定元素应用样式的需要. 通过使用打包机,身体样式被应用于HTML元素和后人打字元素:h1,h2,h3,h4,h5,p,a,脚,强,em,小,sup,sub,ul,ol,li. 示例 ```html

Heading level 1

Heading level 2

Some body copy.

Some link.
``` 见 [演示](https://o2-core.origami.ft.com/?path=/docs/deprecated-o-typography-readme--docs&globals=backgrounds:!undefined) 详细列出所提供的课程及其效果. #### 主题类 `o-typography` 还提供主题的包装课. - `o-typography-inverse` - 让身体复制和链接白色, 用于一个黑暗的背景. - `o-typography-professional` - 改变FT专业分品牌的链接颜色(只有核心品牌) - `o-typography-professional o-typography-inverse` - 反向主题版本,用于FT专业分品牌(仅核心品牌) - `o-typography-ft-live o-typography-inverse` - 反向主题的版本,用于FT Live子品牌(仅核心品牌) 例如: ```html
Some link using FT Professional branding.
``` ### 正在逐步加载网络字体 使用网页字体的缺点之一是一些浏览器在字体下载时会隐藏文本(Flash of Invisible Text, aka FOIT). 这个 [字体播放](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) 属性可以在字体面中用于显示系统字体的回落。 然后要么在字体装入时立即互换,要么在下一页装入时互换. 不过 `font-display` 由Internet Explorer或移动 Safari 10 不支持,所以 `o-typography` 提供自定义执行,通过从用于显示倒置字体的 html 元素中删除一个类来工作。 使用这种方法,我们可以支持更古老的浏览器,并调整倒回字体的大小,这样它看起来更像我们的自定义字体. CSS会看起来有点像: ```css p { font-family: FinancierDisplayWeb, serif; font-size: 20px; line-height: 24px; } .font-loading-serif p { font-family: serif; font-size: 18px; } ``` _为了去除在ft.com上加载o-typography的渐进字体的需要, 以及它给我们的倒置字体的再大小, [可能需要跨 ft.com 项目的工作](https://github.com/Financial-Times/o-typography/issues/248)。 。 。 ._ #### 禁用渐进加载 如果您不想使用的话 `o-typography` 渐进字体加载集 `$o-typography-progressive-font-loading: false;` 在导入组件前, 在您的项目顶端 : ```scss // configure o-typography to not include progressive font fallback css $o-typography-progressive-font-loading: false; // import dependencies @import '@financial-times/o-typography/main'; @import '@financial-times/o-fonts/main'; ``` #### 设置渐进加载 设置 `o-typography` 渐进字体加载包括它的 CSS 和 JavaScript 在您的工程中 。 在确保您有您想要加载的 html 元素的每个字体的加载类时 : ```html ``` 由于O-typtography JavaScript检测到字体已加载并删除了以上CSS类,倒置字体会切换到每个页面负载上的自定义字体. 这导致了视觉"快闪". 防止在 `head` 您的页面 : ```js var rootElement = document.querySelector('html') if (/(^|\s)o-typography-fonts-loaded=1(;|$)/.test(document.cookie)) { var fontLabels = ['sans', 'sans-bold', 'display', 'display-bold'] for (var i = 0; i < fontLabels.length; i++) { rootElement.className = rootElement.className.replace('o-typography--loading-' + fontLabels[i], '') } } ``` 如果使用 Sass 构建您的工程, 用于逐步加载字体的样式在使用时默认输出 [使用大小写组合](https://npmcn.com/package/%40financial-times/o-typography/#readme-use-case-mixins) 或者说 [类型组合](https://npmcn.com/package/%40financial-times/o-typography/#readme-type-mixins)。 。 。 . ## 萨斯 要包括所有打字课,请使用 `oTypography` 组合 : ```scss @include oTypography(); ``` 要包含打字样式, 颗粒地传递一个选项参数, 其特性包括: ```scss @include oTypography($opts: ( 'wrapper' )); ``` | 特性 | 说明 | 品牌支持 | | :-: | :-: | :-: | | 标题 | 头课. 举个例子. `o-typography-heading-level-1`, (中文(简体) ), `o-typography-heading-level-2`等 (中文(简体) ). | 核心、内部、白色标签 | | 包装 | 类 `o-typography-wrapper` 以语义为主的样式,包括标题、段落、列表、链接等. `

`, (中文(简体) ), `

`, (中文(简体) ), `

  • `, (中文(简体) ), ``, (中文(简体) ), `
    ` | 核心、内部、白色标签 | | 机构 | 标准正文副本的一个类,如段落. | 核心、内部、白色标签 | | 链接 | 锚标记的类,包括指向外部链接的 septate 类. | 核心、内部、白色标签 | | 列表 | 样式列表的分类, 命令或未命令 . | 核心、内部、白色标签 | | 标题 | 样式标题的类 . | 核心、内部、白色标签 | | 页脚 | 一个风格脚步的班级. | 核心、内部、白色标签 | | 水电费 | 用于修改包括重量,风格,上标,下标在内的打字功能的类集. | 核心、内部、白色标签 | [见演示](https://o2-core.origami.ft.com/?path=/docs/deprecated-o-typography-readme--docs&globals=backgrounds:!undefined) 为这些特征提供的CSS课程的完整清单. **注:包括字体** 通话 `oTypography` 将输出字体面来下载自定义的"金融时报"字体。 然而,IE11可以下载未使用的字体。 根据您对 o- Typographic 集的使用, 将字体面值更细微 `$o-typography-load-fonts: false` 和使用情况 [o-fonts 数据](https://o2-core.origami.ft.com/?path=/docs/deprecated-o-fonts-readme--docs&globals=backgrounds:!undefined)。 。 。 . ```scss // import dependencies @import '@financial-times/o-typography/main'; @import '@financial-times/o-fonts/main'; // configure o-typography to not include fonts $o-typography-load-fonts: false; // include a limited set of recommended font families manually @include oFonts($opts: ('recommended': true)); // include css for all typography @include oTypography(); ``` 如果一个 `oTypography` 混合输出字体的家族/ 重量/ 样式, 字体面尚未包含在工程中 。 通过设置可以丢出错误 `$o-typography-error-for-missing-fonts` 到错误消息。 自定义错误消息是有用的,因为工程师应该做什么取决于工程. ```scss // import dependencies @import '@financial-times/o-typography/main'; @import '@financial-times/o-fonts/main'; // configure o-typography to not include fonts $o-typography-load-fonts: false; // error if a font is used which has not been included $o-typography-error-for-missing-fonts: 'This project only allows recommended o-fonts! No fun for you without first discussing performance with the Font Guardians of this project.'; // include a limited set of recommended font families manually @include oFonts($opts: ('recommended': true)); // try to use a font which is not recommended, // and has not been included with o-fonts .fancy-typography-used-only-here { // throws an error which includes the `$o-typography-error-for-missing-fonts` message. // a thin/italic font face has not been included @include oTypographySans($scale: 1, $weight: 'thin', $style: 'normal'); } ``` O-typography中的 sass 也提供几种混合剂,用于您的项目. 探索所有函数/组合 [SassDoc 文档](https://npmcn.com/package/%40financial-times/o-typography/sassdoc) 在登记册中. ### 使用大小写混合 为避免重复 CSS 我们建议使用默认的 o- Typography 类输出 [类型](https://npmcn.com/package/%40financial-times/o-typography/#readme-sass)在无法使用 o-typtography 标记的情况下, Sass 混音符可用于输出标题、 机构副本和链接等用例的样式. 见 [o- 打字系统 SassDoc](https://o2-core.origami.ft.com/?path=/docs/deprecated-o-typography-sassdoc--docs&globals=backgrounds:!undefined) 包括更多细节和实例。 又见 [编辑打字](https://github.com/Financial-Times/o-editorial-typography), (中文(简体) ), [引用](https://github.com/Financial-Times/o-quote/),以及 [大数](https://github.com/Financial-Times/o-big-number/) 用于更具体的打字工具. #### 排版标题 使用 `oTypographyHeading` 改为方向级别 1-6 的输出样式. ```scss h2 { @include oTypographyHeading($level: 2); } ``` #### oTypographyBody 地图 使用 `oTypographyBody` 改为输出正文副本的样式,例如段落文本. ```scss p { @include oTypographyBody(); } ``` 您也可以使用 `inverse` 主题: ```scss p { @include oTypographyBody($theme: 'inverse'); } ``` #### 输入链接 使用 `oTypographyLink` 改为链接的输出样式. ```scss a { @include oTypographyLink(); } ``` 您也可以输出给定主题的链接样式 : - `inverse` - `professional` (只有核心品牌) - `professional-inverse` (只有核心品牌) - `ft-live` (只有核心品牌) ```scss a { @include oTypographyLink($theme: 'professional'); } ``` 要创建自定义链接样式设置 `$theme` 到地图的参数 : - **基础**页:1 [o-颜色](https://o2-core.origami.ft.com/?path=/docs/deprecated-o-colors-readme--docs&globals=backgrounds:!undefined) 链接的调色板颜色名称或颜色 - **盘旋**页:1 [o-颜色](https://o2-core.origami.ft.com/?path=/docs/deprecated-o-colors-readme--docs&globals=backgrounds:!undefined) 悬浮时链接的调色板颜色名称或颜色 - **上下文** (可选): a [o-颜色](https://o2-core.origami.ft.com/?path=/docs/deprecated-o-colors-readme--docs&globals=backgrounds:!undefined) 显示链接后的背景颜色的调色板颜色名称或颜色( 核心品牌默认为纸张, 否则为白色) ```scss .my-custom-link { @include oTypographyLink($theme: ('base': 'claret', 'hover': 'claret-30')); } ``` #### 字母表列表 `oTypographyList` 例如列表的输出样式 `ul` 或者说 `ol` 元素和样式 `li` 要素。 它不输出字体大小,重量等特定字体样式. 字体样式取而代之是从母元素中继承而来. `oTypographyList` ,默认输出只在所有列表类型之间共享样式。 要输出列表类型的所有样式 `$type` 对任意一个参数 `unordered` 或者说 `ordered`。 。 。 . 未排序列表的输出样式 : ```scss .my-unordered-list { @include oTypographyList('unordered'); } ``` 使用 `$include-base-styles` 以避免重复列表类型之间的共享样式: ```scss .my-list { @include oTypographyList(); } .my-list--ordered { @include oTypographyList($type: 'ordered', $include-base-styles: false); } .my-list--unordered { @include oTypographyList($type: 'unordered', $include-base-styles: false); } ``` #### 拼写符号 `oTypographyCaption` 信用/封存的输出样式,例如图片或视频元素. ```scss caption { @include oTypographyCaption(); } ``` #### 脚本印刷机 `oTypographyFooter` 页脚元素的输出样式. ```scss footer { @include oTypographyFooter(); } ``` #### oTypographySub和oTypography 超级 `oTypographySub` 财务报告和审定财务报表 `oTypographySuper` 为 sans-serif 下标和上标元素提供样式. ```scss sup { @include oTypographySuper; } sub { @include oTypographySub; } ``` ### 类型混合 如果只输出字体家族,字体大小和行高,没有附加样式,则使用类型混音. - `oTypographySans` - 典型的UI元素. - `oTypographySerif` - 典型的编辑机构副本. - `oTypographyDisplay` - 典型的编辑标题. 这些混音器会提出论据: - **缩放**:字体缩放从-2到-10之间的数字,或比例图,在不同断点上以响应的方式指定比例. 这按照字体尺度设置了字体大小和行高. - **线高**: 要设置的行高值。 所选行高的默认值 `scale` 或者说 `null` 如果没有选择比例. - **重量**: 要设置的重量值, 例如 . `regular`, (中文(简体) ), `semibold`, (中文(简体) ), `bold`。 。 。 . `null` 默认. - **样式**: 要设置的样式值, `normal` 或者说 `italic`。 。 。 . `null` 默认. - **包括家庭**: 是否输出 `font-family` 属性. `true` 默认. - **包括渐进式**: 是否输出进步字体加载样式 . `true` 默认. 输出只用于 serif 字体的字体家族属性 . ```scss @include oTypographySerif(); ``` 输出字体- 家庭, 字体大小, 以及 sans 字体的行高 . ```scss @include oTypographySans($scale: 1); ``` 输出字体- 家族,字体大小, 和线高, 以响应方式表示 。 尺度默认为0,1为中显示器,2为额外大显示器. ```scss @include oTypographySerif($scale: ('default': 0, 'M': 1, 'XL': 2)); ``` 输出字体家族,字体大小,显示字体的行高. 设置自定义行高1.6. ```scss @include oTypographyDisplay($scale: 1, $line-height: 1.6); ``` 输出字体-相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相相接相接相接相接相接相接相相接相接相相接相接相接相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相. ```scss @include oTypographySerif($scale: 1, $weight: 'bold', $style: 'italic'); ``` 输出 sans 字体属性而不包含字体家庭属性 。 如果修改字体家族继承且不需要重复的现有打字方式的大小,则这样做是有用的. ```scss @include oTypographySans($scale: 1, $style: 'italic', $include-font-family: false); ``` 输出 sarif 字体属性, 对于倒置字体没有大小( 不进行渐进字体加载) . ```scss @include oTypographySerif($scale: 1, $style: 'italic', $include-progressive: false); ``` ### 线条宽度 如果需要封入行宽,o-typtography提供了一个函数,它根据字体大小和每行字符的最佳数量(65~)来限制该值. 限制打字的行长提高了可读性. ```scss max-width: oTypographyMaxLineWidth(); ``` ### 使用自定义字体 要设置自定义字体, [首先使用 o- fonts 注册字体](https://o2-core.origami.ft.com/?path=/docs/deprecated-o-fonts-readme--docs&globals=backgrounds:!undefined)。 。 。 . 然后使用 `oTypographySetFont` 拨打其他电话之前 `o-typography` 混合剂 它接受字体类型(sans, serif,或显示)和自定义字体家族. ```scss // Set custom sans font. @include oTypographySetFont($type: 'sans', $family: 'MySansFont, sans'); // The custom sans font is now output by other `o-typography` mixins such as `oTypography`. @include oTypography(); ``` ### 使用自定义字体缩放 `o-typography` 支持多字体缩放,因此每个字体可能使用不同的缩放. 注册自定义缩放使用 `oTypographyDefineFontScale`,混音系统接受比例尺的字体家族和比例尺映射(比例尺数字图到字体大小/行高). 如果定义自定义字体的缩放,则首先 [设置自定义字体](https://npmcn.com/package/%40financial-times/o-typography/#readme-use-a-custom-font)。 。 。 . ```scss $example-custom-font-family: 'MySansFont, sans'; $example-custom-font-scale: ( -2: (12, 16), // $scale: ($font-size, $line-height) -1: (14, 16), 0: (16, 20), 1: (18, 20), 2: (20, 24), 3: (24, 28), 4: (28, 32), 5: (32, 32), 6: (40, 40), 7: (48, 48), 8: (56, 56), 9: (72, 72), 10: (84, 84), ); @include oTypographyDefineFontScale($example-custom-font-family, $example-custom-font-scale); ``` ### 自定义 `o-typography` 向 [设置自定义字体](https://npmcn.com/package/%40financial-times/o-typography/#readme-use-a-custom-font) (单位:千美元) [自定义字体缩放](https://npmcn.com/package/%40financial-times/o-typography/#readme-use-a-custom-font-scale)。如果您的项目使用 `whitelabel` 品牌, `o-typography` 提供了进一步自定义打字功能的选项 `oTypographyCustomize` 混合剂. 现 `oTypographyCustomize` 只能更新whitelabel品牌项目的标题样式(_请联系 Origami 请求更多选项_) (中文(简体) ). `oTypographyCustomize` 接受每个密钥为标题级的配置图( 1-6) `heading-level-[level]` 改为标题平面和加权图: - `weight`:标题重量(例如. `semibold`(中文(简体) ) - `scale`: 默认标题缩放,在没有其他缩放时使用(例如5) - `scale-s`:小景区及以上景区的标题尺度. - `scale-m`:中取景所及以上取景所的标题尺度. - `scale-l`:大取景地及以上取景地的标题尺度. - `scale-xl`:外大取景所及以上取景所的标题尺度. 在下面的例子中,我们更新了h1和h2标题的大小和重量: ```scss $o-brand: whitelabel; @import '@financial-times/o-typography/main'; // 1. Set a custom font. // See "Use A Custom Font". // 2. Set a custom typographic scale. // See "Use A Custom Font Scale". // 3. Customise typography variants. @include oTypographyCustomize(( 'heading-level-one': ( 'scale': 5, // Update the size of h1. 'scale-s': 7, // Increase the size of h1 on small devices and above. 'weight': 'semibold' // Update the weight of the h1. ), 'heading-level-two': ( 'scale': 6 // Update the size of h2 (up to h6 is supported heading-level-six). ) )); // 4. Output typography styles. h1 { @include oTypographyHeading($level: 1); } h2 { @include oTypographyHeading($level: 2); } ``` ## Java 脚本 o- Typtography 使用 JavaScript 到 [逐步加载字体](https://npmcn.com/package/%40financial-times/o-typography/#readme-progressive-loading-web-fonts) 如果网友需要很长时间才能装入,可以防止无形内容的闪光(FOIC). 除非你在使用建筑服务 否则JS不会自动运行 您必须构造一个 o- Typographic 对象或开火 `o.DOMContentLoaded` 事件, oTypography为它倾听. **构造 O- 类型** ```js import oTypography from '@financial-times/o-typography'; const otypography = new oTypography(); ``` **发射 ODOM 失败事件** ```js document.addEventListener('DOMContentLoaded', function() { document.dispatchEvent(new CustomEvent('o.DOMContentLoaded')); }); ``` 这两种方法都会触发字体加载脚本. 这将从 html 启用中删除装入类 [渐进字体加载](https://npmcn.com/package/%40financial-times/o-typography/#readme-progressive-loading-web-fonts)。 。 。 . ## 解决问题 ### 不装入 IE11 的字体 很可能是因为配置不当 `Vary` 头曰. 在IE11中,如果 `Vary` 头头包含浏览器不知道的E.G. `FT-Site`,然后它会通过回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回的回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回 解决之道是去除错误 `Vary` 标题值或删除 `Vary` 整个标题。 您可以阅读更多关于 IE 如何处理 `Vary` 页眉上 [MSDN 服务器](https://blogs.msdn.microsoft.com/ieinternals/2009/06/17/vary-with-care/)。 。 。 . ### 不在浏览器中装入字体 这可能是因为服务器发送的字体配置错误了Cross Origin资源共享(CORS). 解决方案是设置信头 `Access-Control-Allow-Origin` 包含值 `*` 对于任何字体请求. ## 移徙指南 | 状态 | 主要版本 | 最后一个小版本 | 移徙指南 | | :-: | :-: | :-: | :-: | | 活动 | 单位3 | 不详 | [迁移到 o3](https://npmcn.com/package/%40financial-times/o-typography/MIGRATION.md#migrating-from-v7-to-o3-foundation) | | 维护 | 第7条 | 不详 | [迁移到 v7](https://npmcn.com/package/%40financial-times/o-typography/MIGRATION.md#migrating-from-v6-to-v7) | | 已贬值 | 6个 | 6.4.6 (中文(简体) ) | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-typography/MIGRATION.md#migrating-from-v5-to-v6) | | 已贬值 | 页:1 | 5.12 联合国 | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-typography/MIGRATION.md#migrating-from-v4-to-v5) | | 已贬值 | 页:1 | 4.3 (中文(简体) ) | \- 说吧 | | 已贬值 | 3个 | 3.3 国家 | \- 说吧 | | 已贬值 | 2个 | 2.0 数据 | \- 说吧 | | 已贬值 | 1个 | 1.16 联合国 | \- 说吧 | ## 联系人 如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-typography/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 . * * * ## 许可证 本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 . 更多关于 [登记册中的演示](https://npmcn.com/package/%40financial-times/o-typography/registry)。 。 。 . ## 常见问题 ### @financial-times/o-typography 是什么？ FT品牌网站的打字风格\. 包括字体缩放,垂直节奏等打字基础,和字体倒回;外加UI的样式,包括链接,标题和标题\. 其他组件以O-打字法为基础,以提供更多 ### 如何安装 @financial-times/o-typography？ 在项目目录运行 npm install @financial-times/o-typography，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/math（^1\.0\.0）、@financial-times/o-grid（^6\.1\.8）、@financial-times/o-fonts（^5\.3\.5）、@financial-times/o-icons（^7\.8\.0）、@financial-times/o-colors（^6\.7\.0）、@financial-times/o-spacing（^3\.2\.5）、@financial-times/o-normalise（^3\.3\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @financial-times/o-typography 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-typography 是否存在。 ### @financial-times/o-typography 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @financial-times/o-typography 可以商用吗？ @financial-times/o-typography 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @financial-times/o-typography 的下载量有多少？ 根据 npm 官方下载统计，@financial-times/o-typography 在 2026/10/15 – 2026/11/13 这 30 天内被下载 14,358 次，日均约 479 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @financial-times/o-typography 还在维护吗？ 最新版本 7\.7\.2 发布于 2026/07/09（4 个月前）；至今共发布 67 个版本，其中过去 12 个月发布了 2 个；首次发布于 2019/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。