⚠️ 注: o- typtography 已被替换为 o3 创建请参看 移徙指南 用于升级的步骤.

o-打字法

FT品牌网站的打字风格.

• 概览
• 使用量
• 标记
• 萨斯
• Java 脚本
• 解决问题
• 移徙指南
• 联系人
• 许可证

概览

该组件提供字体缩放,垂直节奏等打字基础,以及字体倒回. 加UI的样式包括链接,标题,和标题.

其他组件以O-Typtography为基础,以提供更具体的用例,例如: 编辑打字, (中文(简体) ), 引用,或 大数。 。 。 .

默认情况下,o-typtography使用单一的打字尺度,用于所有字体. 比例尺由字体大小和行高组合组成,如下所示:

注:白标签品牌版的o-typtography有不同的默认比例. 字体大小相同,但行-高为1.2x,为每个尺度的字体大小.

这种比例构成所有通过o-typography提供的打字风格. 使用 Sass 时可用 打印组合。 。 。 .

使用量

检查出来 如何将 Origami 组件纳入您的项目 开始 o-typography。 。 。 .

标记

预定义 CSS 类 o-typography 使用时可用 构建服务,并且可以通过 萨斯。 。 。 .

类不依赖于特定的HTML,但我们鼓励开发者使用语义元素.

举个例子.

<h1 class="o-typography-heading-level-1">Heading level 1</h1>
<h2 class="o-typography-heading-level-2">Heading level 2</h2>
<p class="o-typography-body">Some body copy.</p>
<a class="o-typography-link" href="#" >Some link.</a>
<!-- etc. -->

一个链接 可能 在新窗口/标签中打开 target="_blank" 但是,我们建议多数情况下不要这样做,因为这样做可能会使用户感到不适(见附件) 网络内容无障碍准则 (d) 关于何时在新窗口/塔布中打开的建议。 使用 rel="noreferrer noopener" 属性为 target="_blank" 为避免 性剥削 window.opener API 密码。 。 。 .

<a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html" rel="noreferrer noopener" target="_blank" class="o-typography-link">Some external link.</a>

见 演示 详细列出所提供的课程及其效果.

包装类

o-typography 还提供包装课。 这减少了开发者对特定元素应用样式的需要. 通过使用打包机,身体样式被应用于HTML元素和后人打字元素:h1,h2,h3,h4,h5,p,a,脚,强,em,小,sup,sub,ul,ol,li.

示例

<div class="o-typography-wrapper">
    <h1>Heading level 1</h1>
    <h2>Heading level 2</h2>
    <p>Some body copy.</p>
    <a href="#">Some link.</a>
</div>

见 演示 详细列出所提供的课程及其效果.

主题类

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子品牌(仅核心品牌)

例如:

<div class="o-typography-professional">
    <a class="o-typography-link" href="#">Some link using FT Professional branding.</a>
</div>

正在逐步加载网络字体

使用网页字体的缺点之一是一些浏览器在字体下载时会隐藏文本(Flash of Invisible Text, aka FOIT). 这个 字体播放 属性可以在字体面中用于显示系统字体的回落。 然后要么在字体装入时立即互换,要么在下一页装入时互换.

不过 font-display 由Internet Explorer或移动 Safari 10 不支持,所以 o-typography 提供自定义执行,通过从用于显示倒置字体的 html 元素中删除一个类来工作。 使用这种方法,我们可以支持更古老的浏览器,并调整倒回字体的大小,这样它看起来更像我们的自定义字体. 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 项目的工作。 。 。 .

禁用渐进加载

如果您不想使用的话 o-typography 渐进字体加载集 $o-typography-progressive-font-loading: false; 在导入组件前, 在您的项目顶端 :

// 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 class="o-typography--loading-sans o-typography--loading-sans-bold o-typography--loading-display o-typography--loading-display-bold">

由于O-typtography JavaScript检测到字体已加载并删除了以上CSS类,倒置字体会切换到每个页面负载上的自定义字体. 这导致了视觉"快闪". 防止在 head 您的页面 :

    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 构建您的工程, 用于逐步加载字体的样式在使用时默认输出 使用大小写组合 或者说 类型组合。 。 。 .

萨斯

要包括所有打字课,请使用 oTypography 组合 :

@include oTypography();

要包含打字样式, 颗粒地传递一个选项参数, 其特性包括:

@include oTypography($opts: (
    'wrapper'
));

见演示 为这些特征提供的CSS课程的完整清单.

注:包括字体

通话 oTypography 将输出字体面来下载自定义的"金融时报"字体。 然而,IE11可以下载未使用的字体。 根据您对 o- Typographic 集的使用, 将字体面值更细微 $o-typography-load-fonts: false 和使用情况 o-fonts 数据。 。 。 .

// 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 到错误消息。 自定义错误消息是有用的,因为工程师应该做什么取决于工程.

// 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 文档 在登记册中.

使用大小写混合

为避免重复 CSS 我们建议使用默认的 o- Typography 类输出 类型在无法使用 o-typtography 标记的情况下, Sass 混音符可用于输出标题、 机构副本和链接等用例的样式.

见 o- 打字系统 SassDoc 包括更多细节和实例。 又见 编辑打字, (中文(简体) ), 引用,以及 大数 用于更具体的打字工具.

排版标题

使用 oTypographyHeading 改为方向级别 1-6 的输出样式.

h2 {
    @include oTypographyHeading($level: 2);
}

oTypographyBody 地图

使用 oTypographyBody 改为输出正文副本的样式,例如段落文本.

p {
    @include oTypographyBody();
}

您也可以使用 inverse 主题:

p {
    @include oTypographyBody($theme: 'inverse');
}

输入链接

使用 oTypographyLink 改为链接的输出样式.

a {
    @include oTypographyLink();
}

您也可以输出给定主题的链接样式 :

• inverse
• professional (只有核心品牌)
• professional-inverse (只有核心品牌)
• ft-live (只有核心品牌)

a {
    @include oTypographyLink($theme: 'professional');
}

要创建自定义链接样式设置 $theme 到地图的参数 :

• 基础页:1 o-颜色 链接的调色板颜色名称或颜色
• 盘旋页:1 o-颜色 悬浮时链接的调色板颜色名称或颜色
• 上下文 (可选): a o-颜色 显示链接后的背景颜色的调色板颜色名称或颜色( 核心品牌默认为纸张, 否则为白色)

.my-custom-link {
    @include oTypographyLink($theme: ('base': 'claret', 'hover': 'claret-30'));
}

字母表列表

oTypographyList 例如列表的输出样式 ul 或者说 ol 元素和样式 li 要素。 它不输出字体大小,重量等特定字体样式. 字体样式取而代之是从母元素中继承而来.

oTypographyList ,默认输出只在所有列表类型之间共享样式。 要输出列表类型的所有样式 $type 对任意一个参数 unordered 或者说 ordered。 。 。 .

未排序列表的输出样式 :

.my-unordered-list {
    @include oTypographyList('unordered');
}

使用 $include-base-styles 以避免重复列表类型之间的共享样式:

.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 信用/封存的输出样式,例如图片或视频元素.

caption {
    @include oTypographyCaption();
}

脚本印刷机

oTypographyFooter 页脚元素的输出样式.

footer {
    @include oTypographyFooter();
}

oTypographySub和oTypography 超级

oTypographySub 财务报告和审定财务报表 oTypographySuper 为 sans-serif 下标和上标元素提供样式.

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 字体的字体家族属性 .

@include oTypographySerif();

输出字体- 家庭, 字体大小, 以及 sans 字体的行高 .

@include oTypographySans($scale: 1);

输出字体- 家族,字体大小, 和线高, 以响应方式表示 。 尺度默认为0,1为中显示器,2为额外大显示器.

@include oTypographySerif($scale: ('default': 0, 'M': 1, 'XL': 2));

输出字体家族,字体大小,显示字体的行高. 设置自定义行高1.6.

@include oTypographyDisplay($scale: 1, $line-height: 1.6);

输出字体-相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相相接相接相接相接相接相接相相接相接相相接相接相接相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.

@include oTypographySerif($scale: 1, $weight: 'bold', $style: 'italic');

输出 sans 字体属性而不包含字体家庭属性 。 如果修改字体家族继承且不需要重复的现有打字方式的大小,则这样做是有用的.

@include oTypographySans($scale: 1, $style: 'italic', $include-font-family: false);

输出 sarif 字体属性, 对于倒置字体没有大小( 不进行渐进字体加载) .

@include oTypographySerif($scale: 1, $style: 'italic', $include-progressive: false);

线条宽度

如果需要封入行宽,o-typtography提供了一个函数,它根据字体大小和每行字符的最佳数量(65~)来限制该值. 限制打字的行长提高了可读性.

max-width: oTypographyMaxLineWidth();

使用自定义字体

要设置自定义字体, 首先使用 o- fonts 注册字体。 。 。 .

然后使用 oTypographySetFont 拨打其他电话之前 o-typography 混合剂 它接受字体类型(sans, serif,或显示)和自定义字体家族.

// 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,混音系统接受比例尺的字体家族和比例尺映射(比例尺数字图到字体大小/行高).

如果定义自定义字体的缩放,则首先 设置自定义字体。 。 。 .

$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 向 设置自定义字体 (单位:千美元) 自定义字体缩放。如果您的项目使用 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标题的大小和重量:

$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 到 逐步加载字体 如果网友需要很长时间才能装入,可以防止无形内容的闪光(FOIC).

除非你在使用建筑服务 否则JS不会自动运行 您必须构造一个 o- Typographic 对象或开火 o.DOMContentLoaded 事件, oTypography为它倾听.

构造 O- 类型

import oTypography from '@financial-times/o-typography';

const otypography = new oTypography();

发射 ODOM 失败事件

document.addEventListener('DOMContentLoaded', function() {
    document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
});

这两种方法都会触发字体加载脚本. 这将从 html 启用中删除装入类 渐进字体加载。 。 。 .

解决问题

不装入 IE11 的字体

很可能是因为配置不当 Vary 头曰. 在IE11中,如果 Vary 头头包含浏览器不知道的E.G. FT-Site,然后它会通过回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回的回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回 解决之道是去除错误 Vary 标题值或删除 Vary 整个标题。 您可以阅读更多关于 IE 如何处理 Vary 页眉上 MSDN 服务器。 。 。 .

不在浏览器中装入字体

这可能是因为服务器发送的字体配置错误了Cross Origin资源共享(CORS). 解决方案是设置信头 Access-Control-Allow-Origin 包含值 * 对于任何字体请求.

移徙指南

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 . 更多关于 登记册中的演示。 。 。 .