在GitHub页面中添加自定义字体

Question

在GitHub页面中添加自定义字体

11

我刚刚将我的新网站托管在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

3个回答

3

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

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

与之前给出的答案相比，这个配置是从我的本地主机配置上面两级。

- ez_hedge

-1

样式表文件位于https://you.github.io/assets/css/style.css ，当您使用纯粹的markdown作为索引，或者README.md作为索引时。这是 wooden-utensil使用Cayman主题的一个例子，如果您想添加自定义css，我猜您可以将其添加到该文件中，只需保留现有代码即可，因为那样Cayman或其他主题就无法正常工作。总之，我猜只需添加即可。

body {
    font-family: etc;
}

- gdfgfgfdfgdsfsgdsgdf

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FSocko · Accepted Answer

我也曾经遇到过这个问题。本地字体可以正常工作，但在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），因为在本地它是这样显示的。