更改 Jekyll 主题中的字体答案

【问题标题】：Changing a Font in an Jekyll Theme更改 Jekyll 主题中的字体
【发布时间】：2020-01-29 12:52:16
【问题描述】：

最近几天我一直在尝试使用 Jekyll。我想我了解它的基础知识。我测试了大约 4 个模板并让它们运行并理解 jekyll 页面的结构。这没什么神奇的。

今天我想更改模板的字体。我目前正在使用Type on Strap Teamplate，您可以看到我在 git pages Right here. 上构建的 repo

我查看了this post on stackoverflow。这帮助我识别了 _sass/base 文件夹中的 _variables.scss 文件。线程还在继续，说整个文件可能通过一个 scss 文件来控制，通常被称为主题。好了，我在 _sass 文件夹中找到了 Type-on-Strap。

现在我的问题是：我是否必须像下面那样编辑 _variables.scss，如果是，我将 ttf 文件放在哪里或如何正确链接到 webfont？还是我将 _variables 文件保持原样，只需要编辑 type-on-strap.scss 文件？如果又是这样，我需要改变什么？

_variable.scss 文件：

// Typography
$font-family-main: 'Source Sans Pro', Helvetica, Arial, sans-serif;
$font-family-headings: 'Source Sans Pro', Helvetica, Arial, sans-serif;
$font-family-logo: 'Source Sans Pro', Helvetica, Arial, sans-serif;
$font-size: 1.25em;

所以我不想再使用 Sans Pro。我想使用Barlow Semi Condensed 作为主要字体，使用 Barlow Semi Condensed Medium 作为标题和徽标。我可以把代码改成这样吗？：

$font-family-main: 'Barlow Semi Condensed', sans-serif;
$font-family-headings: 'Barlow Semi Condensed', sans-serif;
$font-family-logo: 'Barlow Semi Condensed', sans-serif;

总结：我只想知道，我需要编辑什么才能让 Barlow 字体替换我正在使用的模板上的 sans pro 字体。

希望人们不要因为我发表另一篇关于此的帖子而太生气。我浏览了一些答案，这是尝试的第二天。有点累了:)

提前致谢！

【问题讨论】：

标签： css sass webfonts jekyll-theme

【解决方案1】：

您好，感谢您使用该主题。我看到您的问题有两种解决方案

如果你不熟悉sass，通常可以直接在head.html中导入你字体的css。尝试寻找“嵌入式”版本。

对于这种字体，您可以在标题中添加这一行，然后修改 _variable.scss 以使其正常工作。

<link href="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet">

如果你想用 sass/scss 手动添加你的字体，没有魔法，你需要：
- 下载字体并将它们放在 /fonts 中注意命名，您将需要它。
- 在_sass/external/_source-sans-pro.scss 中查看“Source Sans Pro”是如何完成的。添加一个包含所有正确信息的新文件，例如 BarlowSemiCondensed.scss。
- 为您将要使用的字体创建一个@font-face。（通常当您使用download 字体时，您会得到什么，只需复制这些文件）。
- 不要忘记在type-on-strap.scss 中导入任何新的.scss 文件

【讨论】：