@font-face在Github Pages上无法工作

3

我目前正在努力解决我的个人作品网站的问题。我使用自定义字体使页面看起来更好,但出现了@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 Pages 只托管静态内容,无法进行服务器端逻辑。所以我有点迷失在这种情况下为什么会发生,以及如何解决。非常感谢您提前的帮助。

这里是我检查过的其他解决方案链接。https://stackoverflow.com/questions/5938024/font-face-not-working https://dev59.com/xFsV5IYBdhLWcg3w2h0s https://dev59.com/ZG865IYBdhLWcg3wCqHI - Andrew Moore
这是来自Google Chrome控制台的奇怪GET错误的图片:https://gyazo.com/ffb6353a720bd5c1caf532fe3ebb2e65 - Andrew Moore
我之所以这么说是因为相对链接需要以斜杠开头,否则浏览器会将链接解释为一个新的完全限定域名(FQDN)。据我所知。 - Frits
那正是答案。考虑到我卡在这个问题上的时间有多长,我感到很傻。谢谢你的帮助! - Andrew Moore
感谢您的提示! - Andrew Moore
显示剩余2条评论
2个回答

4
我找到了解决方案!我使用的是绝对链接而不是相对链接。相对链接使所需路径从当前使用的文件位置开始,并需要以 '/' 开头。而绝对链接将从系统根文件夹开始,而不是文件本身的路径。
在这里查看更多信息: coffeecup.com/help/articles/absolute-vs-relative-pathslinks‌​
同时,感谢 Frits 提供的解决方案!

你修改了问题吗?因为你的问题代码显示相对链接。如果你解决了问题,请不要更新帖子以突然展示“完美无缺的代码”。那样做违背了stackoverflow的初衷。 - Mike 'Pomax' Kamermans
不,我上面使用的似乎是绝对链接而不是相对链接。我也没有编辑过我的帖子,它和我发布时一样。@Frits 帮忙解决了问题,我所要做的就是在我的链接前面添加一个 '/'。 - Andrew Moore
啊:那就相反了。没有斜杠的url()是相对链接,具体来说是相对于当前文档。所以如果你在www.cake.com上,它们指向www.cake.com/Fonts/...,如果你在www.cake.com/poundcake/上,它们指向www.cake.com/poundcake/Fonts/...。加上斜杠后,您的URL仍然是相对的,但现在是相对于域根目录(因此在上述两种情况下,它们将指向www.cake.com/Fonts/...)。绝对URL指定完整的http://.......位置(或https://,或//用于绝对URL但相对协议,即“这个页面使用的任何协议”)。 - Mike 'Pomax' Kamermans

0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接