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

【问题标题】：Use custom font in GitHub pages在 GitHub 页面中使用自定义字体
【发布时间】：2022-01-27 23:02:48
【问题描述】：

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

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

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

project files directory

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

【问题讨论】：

这里需要添加代码！
这和 Github 有什么关系？
@Aahad 你是说 html 代码吗？
@match 它在本地运行良好，但是当向 GitHub 提交新更改时，它在在线 GitHub 页面上不起作用！
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： css github github-pages

【解决方案1】：

我改变了这样的目录路径：

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

刚刚在/ 之后添加了一个.，不知道为什么，但现在可以使用了！

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

【讨论】：

【解决方案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 中就像在 Windows 资源管理器中打开 C:\ 一样。

这个句点. 表示当前目录，当您使用./ 而不是/ 时，您指定了当前目录 中文件/文件夹的路径。

现在在我的styles.css 中，如果我使用此路径/resources/Samim.ttf，这意味着root“resources” 文件夹内的“Samim.ttf”文件/strong> 目录。

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

- root
  - resources
    - Samim.ttf

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

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

因此，您必须将 Absolute Path 替换为 Relative Path，即：

./resources/Samim.ttf

阅读更多关于相对和绝对路径LinuxHandBook.com

【讨论】：