本地字体未在 .scss 文件中导入答案

【问题标题】：Local fonts are not importing in .scss file本地字体未在 .scss 文件中导入
【发布时间】：2020-08-13 18:55:54
【问题描述】：

我一直在尝试使用静态网站生成器构建网站。我想将从网上下载的字体导入到我的一个 .scss 文件中。我一直在尝试这样做几个小时，但没有任何成功，我无法理解我哪里出错了。任何帮助将不胜感激。

所以，我的文件结构如下：

资产
- scss
  - style.scss
- 字体
  - 几何软件专业版
    - Geometry_Soft_Pro-Bold_N-webfont.woff
    - Geometry_Soft_Pro-Bold_N-webfont.woff2
    - stylesheet.css

现在，Assets/fonts/stylesheet.css 的内容是：

@font-face {
    font-family: "Geometry_Soft_Pro-Bold_N";
    src: url("Geometry_Soft_Pro-Bold_N-webfont.woff2") format("woff2"),
         url("Geometry_Soft_Pro-Bold_N-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

这个文件是 fontsquirrel 在从那里下载网络字体工具包时自动生成的。

现在，在 style.scss 中，我使用以下代码 sn-p 导入 stylesheet.css：

@import "../fonts/geometry-soft-pro/stylesheet";

我按照this 的建议删除了上述路径中的 .css，因为我正在将 .css 文件导入 .scss。（另外，我试过保留 .css 也不管用）

我正在尝试使用以下代码 sn-p 将字体用于标题：

#home-title {
  font-family: "Geometry_Soft_Pro-Bold_N", $fonts;
  margin: 0;
  font-size: 5em;
  text-align: center;

}

我得到的结果不是我期待的 geometry_soft_pro 字体。

为了测试我的字体在我的样式表的其他地方被覆盖的场景，我已经在浏览器上使用了检查元素进行了验证。 font-family 不会在任何地方被覆盖。这似乎是一个微不足道的问题，我花了几个小时试图解决它。我已经没有关于如何继续前进的想法了。任何形式的帮助都会非常感激。非常感谢！

【问题讨论】：

标签： css sass frontend web-frontend

【解决方案1】：

我找到了自己问题的答案。回想起来，我意识到我遇到了这个问题，因为我一开始没有正确阅读 Hugo 的文档（以及我的主题文档）。

Hugo 构建的公共目录（最终负责构建静态站点的目录）不保留根目录的文件结构。这些文件被重新排列，它们的位置也发生了变化。该位置取决于 Hugo 的静态站点生成器如何从项目的源代码生成公共目录。因此，重要的是要遵循 Hugo 的建议，将某些文件保存在哪里，以便可以在公共（生成的目录）目录中引用它们。 Hugo 建议将字体和图像等文件保存在项目根目录下名为“static”的文件夹中。我错误地将字体文件放在名为“assets”的文件夹中。

【讨论】：