o-编辑-打字法
编辑内容的打字风格.
o-打字法 为用户界面提供基本的打字工具和样式. o-编辑-打字法以编辑内容的打字法为基础,包括头条、标签和副线。 它没有假设编辑打字法将在哪里使用 -- -- 它可以是一页、另一个组件或电子邮件等 -- -- 因此没有提供默认边距。 在文章中应用打字和排版编辑打字 o-编辑外传。 。 。 .
使用量
检查出来 如何将 Origami 组件纳入您的项目 开始 o-editorial-typography。 。 。 .
标记
标题
标题1 -6为课目 o-editorial-typography-heading-level-[level]数字 :
<h1 class="o-editorial-typography-heading-level-1">Heading level 1</h1>
<h2 class="o-editorial-typography-heading-level-2">Heading level 2</h2>
<h3 class="o-editorial-typography-heading-level-3">Heading level 3</h3>
<h4 class="o-editorial-typography-heading-level-4">Heading level 4</h4>
<h5 class="o-editorial-typography-heading-level-5">Heading level 5</h5>
标题1适用于大多数情况,但更注重使用 o-editorial-typography-headline 换句话说.
<h1 class="o-editorial-typography-headline">Don’t settle for black and white</h1>
体质
段落使用 o-editorial-typography-body 类 :
<p class="o-editorial-typography-body">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
名单
顺序列表和无顺序列表都有样式. 使用类 o-editorial-typography-list 和 o-editorial-typography-list--ordered 或者说 o-editorial-typography-list--unordered。 。 。 .
因此列表可能被用于不同的上下文,它们继承了大小和家族等字体属性. 因此它需要将字体样式应用到母元素上. 例如,可以用下列方法做到这一点: o-editorial-typography-body。 。 。 .
<div class="o-editorial-typography-body">
<ul class="o-editorial-typography-list o-editorial-typography-list--unordered">
<li>Lorem ipsum adipiscing elit.</li>
<li>Sed feugiat turpis at massa tristique.</li>
<li>Curabitu r accumsan elit luctus.</li>
</ul>
</div>
<div class="o-editorial-typography-body">
<ol class="o-editorial-typography-list o-editorial-typography-list--ordered">
<li>Lorem ipsum adipiscing elit.</li>
<li>Sed feugiat turpis at massa tristique.</li>
<li>Curabitu r accumsan elit luctus.</li>
</ol>
</div>
主题标记
有主题标签的内容的参考类别. 主题标记通常是一个锚,但如果没有页面链接则不必是.
没有设置字体大小, 因此标记可能用于不同的上下文 .
<a class="o-editorial-typography-topic" href="#">Topic Link</a>
<span class="o-editorial-typography-topic">Topic Without Link</span>
链接
链接使用 o-editorial-typography-link 内置 a o-editorial-typography-body 集装箱.
<p class="o-editorial-typography-body">
An article by
<a href="https://ft.com/" class="o-editorial-typography-link">The Financial Times</a>.
</p>
也提供反向样式,用于暗色背景. 使用 o-editorial-typography-body--inverse 在容器上允许反向样式.
<p class="o-editorial-typography-body o-editorial-typography-body--inverse">
An article by
<a href="https://ft.com/" class="o-editorial-typography-link">The Financial Times</a>.
</p>
作者标记
使用类设置作者标签样式 o-editorial-typography-author。一个作者标签通常是一个锚,但如果没有作者页面可以链接,则不必.
<a class="o-editorial-typography-author" href="#">Joe Doe</a>
<span class="o-editorial-typography-author">Joe Doe</span>
时间戳
o-editorial-typography-timestamp 样式为时间戳。 它没有设置字体大小或家族,因此可以用于不同的上下文,例如文章的旁线或评论部分.
<time class="o-editorial-typography-timestamp" datetime="2019-10-11T20:51:54Z" title="October 11 2019 9:51 pm">October 11 2019</time>
按线
故事的旁线可能使用 o-editorial-typography-byline. 常与作者和时间戳样式同时使用.
<div class="o-editorial-typography-byline">
<a class="o-editorial-typography-author" href="#">Joe Doe</a>
in London
<time class="o-editorial-typography-timestamp" datetime="2019-10-11T20:51:54Z" title="October 11 2019 9:51 pm">October 11 2019</time>
</div>
说明
使用样式标题 o-editorial-typography-caption。 。 。 .
<figure>
<img alt="" src="#">
<figcaption class="o-editorial-typography-caption">
©Lorem John Doe
</figcaption>
</figure>
萨斯
包含所有 o- Editorial- Typology 样式 oEditorialTypography 混合剂.
@import "@financial-times/o-editorial-typography/main";
@include oEditorialTypography();
为了包括你需要的样式 我们建议设置选项 $opts 参数.
例如只包含标题级别1-3和正文复制样式.
@include oEditorialTypography($opts: (
'body': true,
'headings': (1, 2, 3)
));
此示例显示所有选项 :
@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 课程。 混合剂包括:
oEditorialTypographyHeadlineoEditorialTypographyHeadingoEditorialTypographyBodyoEditorialTypographyListoEditorialTypographyCaptionoEditorialTypographyStandfirstoEditorialTypographyBylineoEditorialTypographyTimestampoEditorialTypographyTagoEditorialTypographyDecorated
例如,要输出一个标题:
.my-h2 {
@include oEditorialTypographyHeading(2);
}
或主题标签 :
.my-topic-tag {
@include oEditorialTypographyTag('topic');
}
见 o-编辑-打字 详细内容和更多实例.
字体加载
通话 oEditorialTypography 将输出字体面来下载自定义的"金融时报"字体。 然而,IE11可以下载未使用的字体。 要根据您的用法集, 包含更多外观的字体 $o-editorial-typography-load-fonts: false 和使用情况 o-fonts 数据。如果您的工程也使用了 o- typegraphy 并且已经设置 $o-typography-load-fonts (单位:千美元)。 。 。 .
// 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 编辑- 打字 |
| 维护 | 3个 | 不详 | 迁移到 v3 |
| 维护 | 2个 | 不详 | 迁移到 v2 |
| 维护 | 1个 | 1.1 国家 | 不详 |
联系人
如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 {\fn黑体\fs20\shad2\2ah82\3ah20\4ah33\fscx95\3ch592001\be1}#毛发折射 或电子邮件 折纸支持。 。 。 .
许可证
本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .