Ошибка при импорте пользовательских шрифтов с использованием SASS - PullRequest
Новая
       42

Ошибка при импорте пользовательских шрифтов с использованием SASS

0 голосов
/ 28 февраля 2019

Я использую Sass для своего проекта и получаю эту ошибку на своей домашней странице при импорте шрифтов из папки пользовательских шрифтов Merriweather. Проблема в том, что когда я проверяю вкладку сети в Chrome, она показывает, что файл шрифта Agendaвключенный, но не файл шрифта Merriweather. Оба шрифта Agenda и Merriweather находятся в отдельных папках.

Ошибка:

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

Структура папок моего проекта выглядит следующим образом:

  • 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;


}

1 Ответ

0 голосов
/ 01 марта 2019

Конечно, мне нужно будет увидеть скриншот вашей папки 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;
}
...