@font-face 不适用于 github 页面

Question

我目前正在尝试解决我的投资组合网站的问题。我使用自定义字体来保持页面的美观，但出于某种原因，@font-face 无法正常工作。

这是我的 CSS:

@font-face{
font-family: 'Quicktype';
src: url('Fonts/quicktype_condensed-webfont.woff2') format('woff2'),
     url('Fonts/quicktype_condensed-webfont.woff') format('woff'),
     url('Fonts/QuickType Condensed.ttf') format('truetype'),
     url('Fonts/QuickType Condensed.eot'),
     url('Fonts/QuickType Condensed.eot?#iefix') format('embedded-opentype'),
     url('Fonts/QuickTypeCondensed.svg#QuickTypeCondensed') format('svg');
font-weight: normal;
font-style: normal;
}

这是我网站的 link：

http://alfabitsgamedev.com/

这是我的 github 文件层次结构的 link。

https://github.com/Alfabits/alfabits-game-dev-3

我已尝试使用尽可能多的字体文件类型，但它无法在我使用的任何浏览器上运行。我尝试了不同的字体目录路径，但这似乎也不起作用。我也环顾四周，发现 none 的解决方案解决了我的问题。

网站总是 returns 出现 .ttf、.woff 和 .woff2 字体的 404 错误（出于某种原因，从来没有其他字体），或者出现奇怪的 GET 错误。

我知道我不能使用 .htaccess 文件，因为 github 页面只承载静态内容，不能执行服务器端逻辑。所以我有点迷失了为什么会发生这种情况以及如何解决它。提前致谢，如果您能提供帮助。

Answer 1

我找到了解决办法！我使用的是 绝对链接 而不是 相对链接 。相对链接使预期路径从 currently-used 文件所在的位置开始，并且需要以 '/' 开头。绝对链接将从 系统的 根文件夹而非文件的根文件夹开始预期路径。

在这里找到更多：咖啡杯。com/help/articles/absolute-vs-relative-pathslinks‌

此外，感谢 Frits 的解决方案！

Answer 2

不相关的答案，以防有人遇到这个问题。如果你有任何以 _ 开头的目录，例如 webpack创建：./_/node_modules/@fortawesome/....

https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/

@font-face 不适用于 github 页面

@font-face not working with github pages

css

fonts

github-pages