如何在 Github 页面上加载自定义字体？

Question

我查看了其他一些话题，none 这些解决方案对我有用，所以我决定开始一个新话题。

我正在尝试在我的项目中使用自定义下载的字体，在本地工作正常，但在 Github 页面上，该字体没有显示。

这是我添加到 CSS 文件并在本地项目上运行的代码。

@font-face {
font-family: 'BadDogSCapsSSKBold';
src: url('/font/BadDogSCapsSSKBold.svg#BadDogSCapsSSKBold') format('svg'),
url('/font/BadDogSCapsSSKBold.ttf') format('truetype'),
url('/font/BadDogSCapsSSKBold.woff') format('woff');
font-weight: normal;
font-style: normal;
}

如上所述，我尝试了一些其他人说有效的选项，但没有成功，我尝试了以下三种方法：

./font
../font
../../font

这是我的本地项目结构 IDE

这是 Github 上的文件夹结构，虽然我直接从 Pycharm 推送了项目，所以我不希望那里出现错误，是的，[=31] =] 文件在 css 文件夹中。

Answer 1

现在可以使用了，问题部分出在最初使用的路径上，但主要是由于 Github 页面需要额外的时间来更新。

我过去创建的所有页面在 link 旁边显示一个绿色复选标记并标记为活动后立即完全正常工作，如下所示，这对我来说从未如此5分钟多，因为都是小项目，这次用了3个多小时。

最后，我在本地和远程都适用的选项是在路径前添加 ../，就像这样。

@font-face {
font-family: 'BadDogSCapsSSKBold';
src: url('../font/BadDogSCapsSSKBold.svg#BadDogSCapsSSKBold') format('svg'),
url('../font/BadDogSCapsSSKBold.ttf') format('truetype'),
url('../font/BadDogSCapsSSKBold.woff') format('woff');
font-weight: normal;
font-style: normal;
}

我没能很快弄明白的原因是当我看到 ../ 方法在一小时后不起作用，而另一个线程说在 2022 年你应该使用 ../../ 方法，我没有给它足够的时间，在另一端，../../ 方法对我来说根本不起作用，无论是本地还是远程，我让它整晚都在确定。

如何在 Github 页面上加载自定义字体？

How to load custom font on Github pages?

css

fonts

path

github-pages