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

Question

我正在为我的项目使用 Sass，当我从 Merriweather.The 的自定义字体文件夹导入字体时，我在主页上收到此错误问题是，当我检查chrome 它显示包含 Agenda 字体文件但不包含 merriweather 字体 file.Both Agenda 和 Merriweather 字体位于不同的文件夹中。

错误：

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

我的项目文件夹结构是这样的：

project-folder/fonts-folder/Merriweather-folder/All Merriweather 的字体在这里
project-folder/fonts-folder/Agenda-folder/All 此处为议程字体
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 文件夹的屏幕截图，但我认为找不到字体是因为字体声明中的拼写错误。 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;
}

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

Getting Error on Importing Custom Fonts using SASS

css

sass

font-face

truetype