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

Question

我正在尝试使用 Webfonts 构建 Jekyll。字体在本地正确显示，但是当推送到实时环境时，字体不显示。对于每种缺失的字体，控制台错误 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

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 方法可以做到这一点，但我还没有找到。

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

Using @font-face webfonts in a Jekyll build

html

css

fonts

jekyll

webfonts