在 Jekyll 构建中使用 @font-face webfonts答案

【问题标题】：Using @font-face webfonts in a Jekyll build在 Jekyll 构建中使用 @font-face webfonts
【发布时间】：2020-03-13 22:37:58
【问题描述】：

我正在尝试使用 Jekyll 构建的 webfonts。字体在本地正确显示，但当推送到实时环境时，字体不显示。每种字体缺失都会出现Failed to load resource: the server responded with a status of 404 () 的控制台错误。

_site 目录是这样设置的：

assets/css/style.css
fonts/ <-- all my .woff files are in here
index.html

index.html 文件中引用了 CSS 文件，如下所示：

<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">

@font-face 声明是这样的：

@font-face {
  font-family: 'My font';
  src:  url('../../fonts/myfont.woff2') format('woff2'),
        url('../../fonts/myfont.woff') format('woff');
}

我是否需要在 _config.yml 文件中声明某些内容才能正常工作？

【问题讨论】：

标签： html css fonts jekyll webfonts

【解决方案1】：

这正在工作。您需要将字体文件放在根目录中才能正常工作。然后这些文件在构建时进入_site 目录的根目录。

例如：

之前：

my-jekyll-theme/assets/css/style.css
my-jekyll-theme/myfont.woff
my-jekyll-theme/myfont.woff2
my-jekyll-theme/index.html

构建后：

_site/assets/css/style.css
_site/myfont.woff
_site/myfont.woff2
_site/index.html

@font-face 声明引用根目录下的字体文件：

@font-face {
  font-family: 'My font';
  src:  url('../../myfont.woff2') format('woff2'),
        url('../../myfont.woff') format('woff');
}

index.html 内部使用相同的 CSS 引用

<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">

可能有更多的 Jekyll 方法可以做到这一点，但我还没有找到。

【讨论】：