Блог

Главная - Вопросы по программированию - Смешивание для font-face не приводит к печати стилей при использовании

Смешивание для font-face не приводит к печати стилей при использовании

#css #sass #font-face #mixins

#css #sass #font-face #mixins

Вопрос:

У меня следующая структура папок:

введите описание изображения здесь

style.scss выглядит так:

 @import "mixins.scss";
@import "theme/**.scss";

Все из style.scss скомпилировано внутри theme.min.css .

В _mixin.scss , у меня есть mixin для font-face :

 @mixin font-face($font-name, $file-name, $weight: normal, $style: normal) {
  @font-face {
    font-family: quote($font-name);
    src: url($file-name   '.eot');
    src: url($file-name   '.eot?#iefix')  format('embedded-opentype'),
    url($file-name   '.otf') format('otf'),
    url($file-name   '.woff') format('woff'),
    url($file-name   '.woff2') format('woff2'),
    url($file-name   '.ttf')  format('truetype'),
    url($file-name   '.svg##{$font-name}')  format('svg');
    font-weight: $weight;
    font-style: $style;
    font-display: swap;
  }
}

@mixin lemonmilk-bold{
  @include font-face("lemonmilk", "/assets/build/fonts/lemon-milk/bold/lemonmilk-bold", $style: normal, $weight: normal);
}

И в _typography.scss , у меня есть следующее:

 h1{
  @include lemonmilk-bold;
}

Однако стили шрифтов не применяются к интерфейсу?

Я думал, что это как-то связано с путем к папке, возможно (поскольку все стили компилируются theme.min.css ). Но изменение путей тоже ничего не дало для меня.

Не уверен, где я ошибаюсь?

Комментарии:

1. Похоже, это не проблема с путем к папке. Но если бы это было так, вы могли бы легко проверить это, посмотрев, есть ли у вас какие-либо ошибки 404 на Network вкладке вашего браузера.

2. Это было решено? Если это так, и любой из ответов был вам полезен, пожалуйста, отметьте один из них как «Принятый». В противном случае, если вы хотите получить дополнительные разъяснения или у вас все еще есть проблема, просто скажите об этом.

Ответ №1:

Ваша проблема может быть проще, чем вы думаете. Объявления Font face должны отображаться на странице перед любым другим селектором CSS.

Вот так:

 @font-face{
  font-family: 'Your Font;;
  src: url(/var/fonts/yourfont.woff);
  font-weight: 500;
}

body{
  margin: 0;
}

/* more CSS code */

Не это:

 /* Code before the font face declaration */
body{
  margin: 0;
}

@font-face{
  font-family: 'Your Font;;
  src: url(/var/fonts/yourfont.woff);
  font-weight: 500;
}

/* more CSS code */

Ответ №2:

Основная проблема, по-видимому, @font-face заключается в том, что она не должна помещаться в селектор CSS. Вместо @font-face этого стоит сам по себе, и вы используете его с. font-family

Вот как это следует использовать:

 @font-face{
    font-family: fishes;
    src: url(/path/to/file);
    font-weight: 400;
}

h1{
    font-family:fishes;
}

Но, похоже, ваш код неправильно компилируется в это:

 h1{
    @font-face{
        font-family: fishes;
        src: url(/path/to/file);
        font-weight: 400;
    }
}

Что является недопустимым CSS.

Вместо этого вам, вероятно, следует сделать что-то вроде этого:

 //Beginning of CSS file.
@include font-face("lemonmilk", "/assets/build/fonts/lemon-milk/bold/lemonmilk-bold", $style: normal, $weight: normal);

...
...
...

h1{
    font-family:lemonmilk;
    font-weight:normal;
}

и удалите @mixin lemonmilk-bold .

Метки: