六艺Joomla分享Gantry5教程:添加和使用字体

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

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

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

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

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

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

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

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

六艺Joomla分享Gantry5教程:添加和使用字体_第1张图片

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

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

六艺Joomla分享Gantry5教程:添加和使用字体_第2张图片

接下来,添加本地字体文件 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如果您还没有这样做,请将文件放在安全的地方。由于您将直接修改此文件,而不是通过自定义覆盖,所以在更新期间可能会丢失这些更改。

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

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

六艺Joomla分享Gantry5教程:添加和使用字体_第3张图片

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

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

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

字体权重

六艺Joomla分享Gantry5教程:添加和使用字体_第4张图片

安装自定义字体:示例

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

六艺Joomla分享Gantry5教程:添加和使用字体_第5张图片

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

六艺Joomla分享Gantry5教程:添加和使用字体_第6张图片

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

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

BLOODY-webfont.eot

BLOODY-webfont.svg

BLOODY-webfont.ttf

BLOODY-webfont.woff

BLOODY-webfont.woff2

六艺Joomla分享Gantry5教程:添加和使用字体_第7张图片

第2步:添加必要的CSS

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

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

/* Adding Font BLOODY */@import"dependencies";@includefont-face('BloodyNormal','gantry-theme://fonts/BLOODY-webfont');.font-family-bloody{font-family:'BloodyNormal',Helvetica,Arial,sans-serif;font-weight: normal;font-style: normal;}

字体使用

六艺Joomla分享Gantry5教程:添加和使用字体_第8张图片

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

{%ifparticle.headline %}{{ particle.headline|raw}}{%endif%}

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

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

六艺Joomla分享Gantry5教程:添加和使用字体_第9张图片

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

六艺Joomla分享Gantry5教程:添加和使用字体_第10张图片

你可能感兴趣的:(六艺Joomla分享Gantry5教程:添加和使用字体)