【发布时间】：2017-06-19 21:05:20
【问题描述】：
我目前正在尝试解决我的投资组合网站的问题。我使用自定义字体来保持页面看起来不错，但由于某种原因@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;
}
这是我网站的链接：
这是我的 github 文件层次结构的链接。
https://github.com/Alfabits/alfabits-game-dev-3
我已尝试使用尽可能多的字体文件类型，但它不适用于我使用的任何浏览器。我尝试了不同的字体目录路径，但这似乎也不起作用。我也环顾四周，我找到的解决方案都没有解决我的问题。
网站总是返回 .ttf、.woff 和 .woff2 字体的 404 错误（由于某种原因，其他字体不会），或者奇怪的 GET 错误。
我知道我不能使用 .htaccess 文件，因为 github 页面只托管静态内容并且不能执行服务器端逻辑。所以我有点不知道为什么会发生这种情况以及如何解决它。如果您能提供帮助，请提前致谢。
【问题讨论】：
-
这是来自 Google Chrome 控制台的奇怪 GET 错误图片：gyazo.com/ffb6353a720bd5c1caf532fe3ebb2e65
-
尝试在您的网址前添加一个正斜杠？即
url('Fonts/quicktype_condensed-webfont.woff2')变为url('/Fonts/quicktype_condensed-webfont.woff2') -
我是说因为 [relative links] (coffeecup.com/help/articles/absolute-vs-relative-pathslinks) 需要以正斜杠开头，否则据我所知浏览器会将链接解释为新的 FQDN。 .
-
这正是答案。考虑到我被这个问题困扰了多长时间，我没有意识到这一点感到很愚蠢。感谢您的帮助！
标签： css fonts github-pages