Помогите начинающему пож-ста. Не могу понять я правильно делаю или нет. Сборка на GULP / Sass.
В style.scss
@mixin font($font_name, $file_name, $weight, $style) {
@font-face {
font-family: $font_name;
font-display: swap;
src: url("../fonts/#{$file_name}.woff") format("woff"), url("../fonts/#{$file_name}.woff2") format("woff2");
font-weight: #{$weight};
font-style: #{$style};
}
}
@import "fonts";
В gulpfile.js выведена функция так, что когда в каталоге есть шрифты и запускаешь в терминале gulp, то в fonts.scss генирируется
@include font("Saira", "Saira-Bold", "700", "normal");
@include font("Saira", "Saira-Medium", "500", "normal");
@include font("Saira", "Saira-Regular", "400", "normal");
@include font("Saira", "Saira-SemiBold", "600", "normal");
А в style.css компилируется в
@font-face {
font-family: "Saira";
font-display: swap;
src: url("../fonts/Saira-Bold.woff") format("woff"), url("../fonts/Saira-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Saira";
font-display: swap;
src: url("../fonts/Saira-Medium.woff") format("woff"), url("../fonts/Saira-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
}
и тд
...как потом подключать стили шрифта к сайту?...если шрифтов несколько? например для всего body один шрифт а для h1 и тд другой...прописывать как обычно font-family, weight и тд? спасибо
Простой
