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

o-fonts 数据

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

• 使用量
• 建议字体
• 默认包含的字体
• 所有可用的字体
• 萨斯
• 捐款
• 移徙指南
• 联系人
• 许可证

使用量

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

建议字体

Origami组件使用有限的一组推荐字体面相,每个品牌都不同. 我们建议 Sass 用户 仅包括所推荐的字体,并在列入另一字体之前仔细考虑性能影响。 但字体选择范围更广 默认情况下包含 因此,它们可用于构建服务用户. Sass 用户 可选择只包含推荐字体,或其中任何字体 可用字体。 。 。 .

核心品牌推荐字体

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

内部品牌推荐字体

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

白标签品牌推荐字体

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

默认包含的字体

选择比 建议字体 默认情况下包含,以便提供给Build Service用户。 如果使用 Origami 构建服务或 包含带有 SAS 的默认字体,取决于您选择的产品品牌:

所有可用的字体

以下任何字体均可加入 o-fonts 使用 索马里,这对可能使用额外字体的专业标题等品牌有用. 构建服务用户仅限于 默认包含的字体。 。 。 .

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

萨斯

包含默认字体

包括 您品牌的所有字体电话 oFonts。 。 。 .

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

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

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

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

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

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

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

字体加载

默认 字体播放 设置为 swap。在支持浏览器时,将显示一个系统字体,直到字体被装入为止。 要更新您的字体加载方法集 $o-fonts-display 在你的屁股顶端, 之前包括任何其他组件.

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


@include oFonts();

使用自定义字体家族

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

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

@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 函数.

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

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

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

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

检查有重或样式的字体

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

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

选中重或样式的字体

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

// 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-资产) (中文(简体) ).

1. 打开 src/scss/_variables.scss 并更新 $o-fonts-build-service-path 变量为 o-fonts-资产 包括您的新字体.

2. 将字体姓氏(如果是一个全新的家族)和变体样式添加到私人 $_o-fonts-families 地图.

3. 如果添加了全新字体, 在 oFonts 混合剂。 包括新的 默认字体 或带有 建议字体 (见 $_o-fonts-default 财务报告和审定财务报表 $_o-fonts-recommended) (中文(简体) ).

4. 最后,更新演示(见 origami.json) (中文(简体) ).

移徙指南

联系人

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

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .