在Jekyll版本中使用@ font-face网络字体

2024-05-19 • 问答

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

这现在正在工作。您需要将字体文件放在根目录中才能正常工作。然后，这些文件会在构建时进入_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 方式，但是我还没有找到。