将自定义字体添加到 GitHub 页面

Question

我刚刚在 GitHub 上托管了我的新网站。我在那里使用了一些自定义字体，这些字体是我在 index.html 和 style.css 文件旁边上传的：

字体代码：

 @font-face {
  font-family: "gogoiadeco";
  src: url('gogoia-deco-webfont.eot');
  src: url('gogoia-deco-webfont.eot?#iefix') format('embedded-opentype'),
    url('gogoia-deco-webfont.woff') format('woff'),
    url('gogoia-deco-webfont.ttf') format('truetype'),
    url('gogoia-deco-webfont.svg#Gogoia') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'icomoon';
  src:url('icomoon.eot');
  src:url('icomoon.eot?#iefix') format('embedded-opentype'),
    url('icomoon.woff') format('woff'),
    url('icomoon.ttf') format('truetype'),
    url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'gogoiaregular';
  src: url('gogoia-regular.eot');
  src: url('gogoia-regular.eot?#iefix') format('embedded-opentype'),
    url('gogoia-regular.woff2') format('woff2'),
    url('gogoia-regular.woff') format('woff'),
    url('gogoia-regular.ttf') format('truetype'),
    url('gogoia-regular.svg#gogoiaregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

我是 GitHub 的新手，我不知道要更改什么才能使这些字体正常工作。

原文由 summerfreeze 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我也有这个问题。我的字体在本地可以正常工作，但在 GitHub 上似乎无法正常工作。

我想出了如何做到这一点：gitHub.io 页面的根目录似乎与本地根目录不同，这导致字体位于错误的文件夹中。

这是我的代码：

 @font-face {
    font-family: F16;
    src: url("../SubSkipper/F16_Panel Font.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

SubSkipper 是我的项目的名称，.ttf 字体位于明显的根目录中，我的意思是：“SubSkipper/”。

路径 ../ 返回一级，然后打开项目的根目录（SubSkipper），因为它出现在本地。

原文由 FSocko 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您在 2022 年搜索此内容：

 @font-face {
    font-family: F16;
    src: url("../../SubSkipper/F16_Panel Font.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

与之前给出的答案相比，我的本地主机配置高出两个级别。

原文由 ez_hedge 发布，翻译遵循 CC BY-SA 4.0 许可协议