本地字体未导入.scss文件

编程问答 2022-11-12

问题描述

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

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

  • 资产
    • scss
      • style.scss
    • 字体
      • geometry-soft-pro
        • 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中，我使用以下代码片段导入stylesheet.css：

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

由于我将.css文件导入到.scss中，因此按照this建议在上面的路径中删除了.css。 （此外，我尝试保留.css也不起作用）

我正尝试通过以下代码片段将字体用于标题：

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

}

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

要测试我的字体在样式表中其他地方被覆盖的情况，我已经在浏览器上使用inspect元素进行了验证。字体家族不会在任何地方被覆盖。这似乎是一个微不足道的问题，我花了数小时试图解决它。我没有关于如何继续前进的想法。任何帮助都将不胜感激。非常感谢！

解决方法

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

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

frontendsassweb-frontend