如何解决本地字体未导入.scss文件
我一直在尝试使用静态网站生成器来构建网站。我想将从网上下载的字体导入到我的.scss文件中。我已经尝试这样做了几个小时,但都没有成功,而且我无法理解我要去哪里。任何帮助将不胜感激。
所以,我的文件结构如下:
- 资产
- scss
- style.scss
- 字体
- geometry-soft-pro
- Geometry_Soft_Pro-Bold_N-webfont.woff
- Geometry_Soft_Pro-Bold_N-webfont.woff2
- stylesheet.css
- geometry-soft-pro
- scss
现在,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”的文件夹中的错误。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。