如何向Jekyll网站添加自定义本地字体？

Question

我有一个从Icomoon导出的自定义图标字体，我正在试图弄清楚如何将它整合到我的Jekyll网站中（我对Jekyll来说是新手！）我已经添加了从我的资产文件夹中的Icomoon导出的目录，我已经包含了这一行：

@include embed-font ("Icomoon", "../assets/fonts/font/icomoon.ttf");

在我的CSS中，并添加到我的配置文件中：

assets:
   sources:
       -_assets/fonts

但是我收到一条错误消息：＆＃34; undefined mixin＆＃39; embed-font＆＃39;在我的CSS的第2行。

有没有人知道我可以采取哪些措施来正确整合它？或者有任何资源/教程吗？我觉得很失落。

Answer 1

而不是使用@include，请尝试@ font-face，而不是像这样：

@font-face {
  font-family: "Icomoon";
  src: url("../assets/fonts/font/icomoon.tff");
}

参考：https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts

Answer 2

1. 下载自定义图标集（ icomoon.zip ），然后提取到某个相对位置。
2. 将“ icomoon / fonts / * ”文件复制到“ 您的项目名称 / assets / fonts / * ”。
3. 将“ icomoon / style.css ”移动到“ 您的项目名称 / _ sass / custom-icons.scss ”；请注意 .scss 扩展名。
4. 打开“ _sass / custom-icons.scss ”文件。

5. 通过在../font之前加font/icomoon.*来更改所有网址路径。-*表示此处的所有扩展名。

   例
   • url（'fonts / icomoon.eot？fscaxe'）;
   • url（'../ fonts / icomoon.eot？fscaxe'）;

6. 将相对的 @import'custom-icons'; 添加到主.scss文件中以包含图标。

7. 记住 @import'custom-icons'; 语句末尾的分号。