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;
}

这是我网站的链接：

http://alfabitsgamedev.com/

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

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

我尝试过使用尽可能多的字体文件类型，但它不适用于我使用的任何浏览器。我尝试过不同的字体目录路径，但这似乎也不起作用。我也环顾四周，我找到的解决方案都没有解决我的问题。

网站总是以.ttf，.woff和.woff2字体的404错误返回（由于某些原因，从不会出现其他字体），或者出现奇怪的GET错误。

我知道我不能使用.htaccess文件，因为github页面只承载静态内容而不能执行服务器端逻辑。所以我很遗憾为什么会这样，以及我如何解决它。如果您能提供帮助，请提前致谢。

Answer 1

我找到了解决方案！我使用绝对链接而不是相对链接。相对链接使目标路径从当前使用的文件所在的位置开始，并且需要以＆＃39; /＆＃39;开头。绝对链接将从系统根文件夹开始，而不是文件开始预期的路径。

在此处查找更多信息：coffeecup.com/help/articles/absolute-vs-relative-pathslinks

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

Answer 2

不相关的答案，以防万一有人遇到此问题。如果您有以.nojekyll开头的任何目录，例如webpack创建的目录，请确保在github-pages分支/目录的根目录中有一个_文件。 }。

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

@ font-face无法使用github页面

2 个答案: