使用SASS导入自定义字体时出错

Question

我正在使用Sass进行我的项目，我在我的主页上从Merriweather的自定义字体文件夹导入字体时出现此错误。问题是，当我检查chrome上的网络选项卡时，它显示包含了Agenda字体文件但没有merriweather字体文件。议程和Merriweather字体都在单独的文件夹中。

错误：

**http://localhost/project-name/fonts/Merriweather/Merriweather-Italic.tff net::ERR_ABORTED 404 (Not Found)**

我的Project文件夹结构如下：

• project-folder / fonts-folder / Merriweather-folder / Merriweather的所有字体
• project-folder / fonts-folder / Agenda-folder / Agenda的所有字体
• 项目文件夹/ SCSS文件夹/谐音文件夹/ global.scss
• 项目文件夹/ SCSS文件夹/ variables.scss

问题：

• 我想知道我的语法是否适合从Merriweather这样的字体系列中导入多种字体？
• 究竟我在variables.scss中做错了什么？ 请帮我解决这个问题。

Variables.scss中的代码

   @font-face {
    font-family: Agenda;
    font-weight: 500;
    font-style: normal;
    src: url("../fonts/Agenda/Agenda-Medium.otf") format("opentype");
}

@font-face {
    font-family: Merriweather-Italic;
    font-weight: normal;
    font-style: italic;
    src: url("../fonts/Merriweather/Merriweather-Italic.tff") format("truetype");
}


@font-face {
    font-family: Merriweather-Regular;
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/Merriweather/Merriweather-Regular.tff") format("truetype");
}

这就是我在globals.scss中使用字体的方式

@import "../variables";

body{

    font-family: Merriweather-Regular;
    font-size: 22px;
    background-color: $white;

}

h1{
    font-family: Merriweather-Italic;
    font-style: italic;
    font-size: 94px;
}

h2{
    font-family: Merriweather-Regular,Merriweather-Italic;
    font-size: 42px;
}

h3{
    font-family: Agenda;
    font-size: 30px;
}

h4{
    font-family: Merriweather-Regular;
    font-style: bold;
    font-size: 27px;
}

h5{
    font-family: Merriweather-Regular;
    font-size: 26px;


}

Answer 1

为了确保我必须看到你的fonts文件夹的截图，但我认为由于font-face声明中的拼写错误而找不到该字体。 True-type字体文件通常有.ttf扩展名而不是.tff。

这意味着你必须调整你的@font-face声明：

@font-face {
   // omitted font-family, weight and style for clarity
   src: url("../fonts/Merriweather/Merriweather-Italic.tff") format("truetype");
}

至：

@font-face {
   // omitted font-family, weight and style for clarity
   src: url("../fonts/Merriweather/Merriweather-Italic.ttf") format("truetype");
}

此时，在variables.scss中，我通常也为每个字体（类型）声明一个字体变量，以便在我的其他SASS文件中使用，例如$merriweather--italic: "Merriweather-Italic", serif;

因此，您可以在global.scss中使用这些变量：

h1{
  font-family: $merriweather--italic;
  font-size: 94px;
}