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 /所有议程的字体在这里
project-folder / scss-folder / partials-folder / global.scss
project-folder / scss-folder / 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文件夹的屏幕截图，但是我认为由于字体声明中的错字而找不到该字体。真型字体文件通常具有.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;
}

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

1 个答案: