添加和使用字体

如何在主题中加载本地字体

在主题中添加本地字体有两种方法。第一个将新的本地字体添加到字体选择器,使您可以将字体设置为在Gantry管理器内的特定区域或站点的某个方面。

第二种方法将字体激活为全局主题。此方法使您可以在主题内使用新的本地字体,但不能在字体选择器中使用。你可以将两者结合起来,让你的字体可以同时用于编辑theme.yaml 文件并对您的文件进行更改 custom.scss 文件。

将新字体添加到字体选择器

如果您想让字体选择器可以访问您的新字体,则需要对其进行编辑theme.yaml 文件添加字体并设置其字体重量关联。

theme.yaml文件对于您的主题工作至关重要。如果您正在对该文件进行编辑,请注意,在主题更新的情况下,该编辑可能会被覆盖。这实际上只建议开发人员创建自己的Gantry主题或高级用户。

以下是您需要采取的步骤来实现这一目标。

Gantry目前没有在字体选择器中预览本地字体的方法。预览目前仅适用于从Google加载的字体。您仍然可以选择本地字体,该字体将加载它以及您在其中列出的任何已上传的变体theme.yaml 文件。

添加和使用字体

您要做的第一件事是重命名中的Web Fonts子文件夹web fonts 目录 gaspar。这将使您在下一步更轻松,因为组织多个上传的网页字体会更简单。

您还需要重命名子目录和文件,以便它们对Web友好。消除空格,使所有内容都为小写字母等。这将进一步使您更轻松,因为您在YAML中引用这些文件。例如,您可以重命名Gaspar Bold-webfont.woff 至 gaspar-bold-webfont.woff。

添加和使用字体

接下来,添加本地字体文件 TEMPLATE_DIR/custom/fonts/。

一旦完成,您可以将新的字体添加到该fonts部分中的YAML 。以模板为例,这就是theme.yaml 文件看起来像默认的。

fonts:
  Raleway:
    900italic: 'gantry-theme://fonts/raleway/raleway-blackitalic/raleway-blackitalic-webfont'
    900: 'gantry-theme://fonts/raleway/raleway-black/raleway-black-webfont'
    700italic: 'gantry-theme://fonts/raleway/raleway-bold/raleway-bolditalic-webfont'
    700: 'gantry-theme://fonts/raleway/raleway-bold/raleway-bold-webfont'
    600italic: 'gantry-theme://fonts/raleway/raleway-semibolditalic/raleway-semibolditalic-webfont'
    600: 'gantry-theme://fonts/raleway/raleway-semibold/raleway-semibold-webfont'
    500italic: 'gantry-theme://fonts/raleway/raleway-mediumitalic/raleway-mediumitalic-webfont'
    500: 'gantry-theme://fonts/raleway/raleway-medium/raleway-medium-webfont'
    400italic: 'gantry-theme://fonts/raleway/raleway-italic/raleway-italic-webfont'
    400: 'gantry-theme://fonts/raleway/raleway-regular/raleway-regular-webfont'
    200italic: 'gantry-theme://fonts/raleway/raleway-lightitalic/raleway-lightitalic-webfont'
    200: 'gantry-theme://fonts/raleway/raleway-light/raleway-light-webfont'
  Lato:
    900italic: 'gantry-theme://fonts/lato/lato-blackitalic/lato-blackitalic-webfont'
    900: 'gantry-theme://fonts/lato/lato-black/lato-black-webfont'
    700italic: 'gantry-theme://fonts/lato/lato-bold/lato-bolditalic-webfont'
    700: 'gantry-theme://fonts/lato/lato-bold/lato-bold-webfont'
    400italic: 'gantry-theme://fonts/lato/lato-italic/lato-italic-webfont'
    400: 'gantry-theme://fonts/lato/lato-regular/lato-regular-webfont'
    200italic: 'gantry-theme://fonts/lato/lato-lightitalic/lato-lightitalic-webfont'
    200: 'gantry-theme://fonts/lato/lato-light/lato-light-webfont'

这里列出的数字是字体的粗细程度。一般来说,400是正常,700是粗体,等等。

重复 TEMPLATE_DIR/gantry/theme.yaml如果您还没有这样做,请将文件放在安全的地方。由于您将直接修改此文件,而不是通过自定义覆盖,所以在更新期间可能会丢失这些更改。

添加一个新的字体到你的主题

如果您希望在您的网站中加载本地字体,可以通过完成以下简单步骤来完成:

Gantry添加和使用字体

添加本地字体文件 TEMPLATE_DIR/custom/fonts/

添加你的字体到你的 custom.scss文件。如果你还没有创建一个,你需要添加它TEMPLATE_DIR/custom/scss

@import "dependencies";
@include import-font('gaspar');

字体权重

Gantry添加和使用字体

安装自定义字体:示例

在这个例子中,我们将解释如何将自定义免费字体Bloody添加到您的Gantry模板。

Gantry添加和使用字体

第1步:添加您的自定义字体文件

Gantry添加和使用字体

Bloody是一个免费的字体,你可以在FontSquirrel下载。请确保您下载@ font-face Kit

解压缩包并将以下文件移至 TEMPLATE_DIR/custom/fonts/:

  • BLOODY-webfont.eot
  • BLOODY-webfont.svg
  • BLOODY-webfont.ttf
  • BLOODY-webfont.woff
  • BLOODY-webfont.woff2

Gantry添加和使用字体

第2步:添加必要的CSS

创建您的自定义样式表文件,custom.scss,并将其添加到 TEMPLATE_DIR/custom/scss/

将以下内容添加到自定义SCSS文件中:

/* Adding Font BLOODY */

@import "dependencies";
@include font-face('BloodyNormal', 'gantry-theme://fonts/BLOODY-webfont');

.font-family-bloody {
  font-family: 'BloodyNormal',Helvetica,Arial,sans-serif;
  font-weight: normal;
  font-style: normal;
}

字体使用

Gantry添加和使用字体

将字体添加到主题的自定义内容目录后,即可将其应用到您的网站。例如,如果你想让一个粒子(Particle)的标题出现在Bloody字体中,你可以在Particle的Twig文件中引用它。

{% if particle.headline %}<h1 class="font-family-bloody">{{ particle.headline|raw }}</h1>{% endif %}

正如你所看到的,我们将h1样式设置为font-family: BloodyNormal;。因为该字体系列是在中定义的custom.scss文件,它应该展现在前端。

还有一步要做。您需要在Gantry管理器的“样式”管理面板中重新编译CSS。这样做会迫使Gantry重新编译CSS,包括您在CSS中所做的更改custom.scss文件。完成此操作后,您现在应该可以重新加载页面并查看更改。

Gantry添加和使用字体

您也可以在Gantry管理器的文本字段中的Span标签中引用它。例如,Key Features 在你想改变粒子(Particle)单个实例的字体的情况下也可以工作。

Gantry添加和使用字体