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

Question

我正尝试在 Jekyll 构建中使用 webfonts。字体在本地正确显示，但是当推送到实时环境时，字体不显示。控制台错误 Failed to load resource: the server responsed with a status 404 () for each font missing.

_site 目录设置如下:

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

CSS 文件在 index.html 文件中引用如下:

<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 文件中声明一些内容才能使其正常工作？

Answer 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 的方式来做到这一点，但我还没有找到。