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

Question

我在我的元素中使用 Sass，从我的 Merriweather 自定义字体文件夹导入字体时，我在主页上收到此错误。问题是，当我检查 chrome 上的网络选项卡时，它显示 Agenda 字体文件是包括但不包括 merriweather 字体文件。Agenda 和 Merriweather 字体都在单独的文件夹中。

错误:

**http://localhost/project-name/fonts/Merriweather/Merriweather-Italic.tff net::ERR_ABORTED 404(未找到)**/p>

我的元素文件夹结构是这样的:

• project-folder/fonts-folder/Merriweather-folder/这里是Merriweather的所有字体

• project-folder/fonts-folder/Agenda-folder/这里是Agenda的所有字体

• 元素文件夹/scss 文件夹/partials 文件夹/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;
}