@ font-face для нескольких шрифтов не работает (SCSS) - PullRequest
Новая
       20

@ font-face для нескольких шрифтов не работает (SCSS)

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

Я пытаюсь определить семейство шрифтов.У меня 18 файлов, весом от 100 до 900, нормальный и курсив.

Мои первые шесть определений работают нормально.То есть: от 100 до 300, как нормальное, так и курсивное.С этого момента это просто не работает.

Я пробовал использовать чистый CSS.Я скомпилировал вручную, и вывод правильный. 

// file structure

assets/fonts/
    Poppins-Thin.ttf
    Poppins-ThinItalic.ttf
    Poppins-ExtraLight.ttf
    Poppins-ExtraLightItalic.ttf
    ...
stylesheets/
    _fonts.scss

// _fonts.scss

@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
    $src: null;

    $extmods: (
        eot: "?",
        svg: "#" + str-replace($name, " ", "_")
    );

    $formats: (
        otf: "opentype",
        ttf: "tr@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
    $src: null;

    $extmods: (
        eot: "?",
        svg: "#" + str-replace($name, " ", "_")
    );

    $formats: (
        otf: "opentype",
        ttf: "truetype"
    );

    @each $ext in $exts {
        $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
        $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
        $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
    }

    @font-face {
        font-family: quote($name);
        font-style: $style;
        font-weight: $weight;
        src: $src;
    }
}

$poppins-weights: ("Thin", "ExtraLight", "Light", "Regular", "Medium", "SemiBold", "Bold", "ExtraBold", "Black");
@for $i from 1 through length($poppins-weights) {
    @include font-face(Poppins, "../assets/fonts/Poppins-#{nth($poppins-weights, $i)}", 100 * $i, normal, ttf);
    @include font-face(Poppins, "../assets/fonts/Poppins-#{nth($poppins-weights, $i)}Italic", 100 * $i, normal, ttf);
}
...