在 GitHub 个页面中使用自定义字体

Question

正在尝试更改 GitHub 页中 styles.css 文件中的字体，代码如下：

  @font-face {
      font-family: "Samim";
      src: url("/resources/Samim.ttf") format("truetype");
    }

这是资源文件夹中保存的目录和字体

project files directory

问题是字体没有改变，也尝试将字体移动到主目录但没有改变，它在 vscode 实时预览中也可以在本地正常工作。

Answer 1

我把目录路径改成这样：

url("./resources/Samim.ttf")

刚刚在 / 之后添加了一个 .，我不知道为什么，但它现在有效了！

也尝试了 ../resources 、 ..resources 和 /resources 但没有成功。

Answer 2

您必须提供文件的相对路径，

例如采用此目录结构：

- root
  - system-files
  - vahid
    - github-pages
      - resources
        - Samim.ttf
      - README.md
      - index.html
      - styles.css

这里的 "root" 是存储您的操作系统的驱动器，"system-files" 包含您的操作系统的重要文件，最后你有这个文件夹 "vahid"，它包含用户的文件，在 "vahid" 你有 "github-pages" 存储所有 github 页面代码的文件夹。

在Path中/表示root，在Windows中把它当作你在[=84=中打开C:\ ] 资源管理器。

而这个句号 . 表示当前目录，当您使用 ./ 而不是 / 时，您指定的是 [=45] 中 file/folder 的路径=]当前目录.

现在在我的 styles.css 中，如果我使用此路径 /resources/Samim.ttf，它的意思是 “资源”[= 中的“Samim.ttf”文件root 目录中的 63=] 文件夹。

你注意到什么了吗？让我尝试在目录结构中显示此路径。

- root - resources - Samim.ttf

如您所见，我们指定的路径不存在，请尝试将其与上面给出的真实目录结构进行比较。

因此，我们必须使用 ./ 而不是 /，因为 "resources" 文件夹与 [=45] 位于同一文件夹中=]"styles.css".

所以你必须用相对路径替换你的绝对路径，这就是：

./resources/Samim.ttf

详细了解相对和绝对路径LinuxHandBook.com

在 GitHub 个页面中使用自定义字体

Use custom font in GitHub pages

css

github

github-pages